Reproduce SassError
You have already maybe got this error when compiling sass file. In this case this error could be reproduced when including mixin
module.
ERROR in ./scss/channel.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Properties are only allowed within rules, directives, mixin includes, or other properties.
on line 23 of components/siteParts/_siteLoading.scss
>> width: $size;
-----^
This error message indicates that my main file ./scss/channel.scss
is including mixin with violated rule at components/siteParts/_siteLoading.scss
. The mixin is like following code.
@mixin loading(size:24px) {
width:size;
height: size;
margin: 0 auto;
border: 2px rgba(color, alpha) solid;
border-top: 2pxcolor solid;
border-radius: 50%;
-webkit-animation: spinnerRot 0.8s infinite linear;
animation: spinnerRot 0.8s infinite linear;
}
It looks no problem at first glance. I can use this mixin code in other class like following code.
.container {
@include loading;
}
Therefore I doubted node-sass module bug but turned out to be simply by bad manner for mixin. I included this mixin at the top of the root area in ./scss/channel.scss without any other directives such a class or id. This loading mixin doesn’t cover with a class or id directive, which causes this node-sass error. The mixin properties would be exposed on non-directive field if compiled.
Before compile
@include loading;
.container {
// Some codes...
}
After compile
width: size;
height:size;
margin: 0 auto;
border: 2px rgba(color,alpha) solid;
border-top: 2px $color solid;
border-radius: 50%;
-webkit-animation: spinnerRot 0.8s infinite linear;
animation: spinnerRot 0.8s infinite linear;
.container {
// Some codes...
}
Conclusion
What I want to say is not to include mixin in a bare field. In this case I should include this mixin in a paticular scope.
Hoping this post would be useful for some developers.