How to fix “SassError: Properties are only allowed within rules, directives, mixin includes, or other properties.”

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.