A Webpack 1 loader that prepends compass-mixins import directives to scss files. This loader acts as a Webpack preLoader and usually works with sass-loader.
npm install mixin-loader --save-dev
When you require third-party scss, you may come across the problem below:
modulesModuleBuildError: Module build failed:
@include border-radius(1px, 1px);
^ No mixin named border-radius
The build error tells that the required file needs a mixin import directive (@import "border-radius";
) to be prepended, but you cannot modify the third-party file.
To solve this, I create this loader to prepend compass mixins to the target files before processed by sass-loader.
This loader prepends either @import "compass";
or @import "~compass-mixins/lib/compass";
to your scss file.
Source file:
.btn {
@include border-radius(1px, 1px);
}
Webpack config:
module.exports = {
module: {
preLoaders: [
{
test: /third-party\.scss$/, // target scss
loader: 'mixin-loader',
},
],
loaders: [
{
test: /\.scss$/, // sent to sass-loader
loaders: ["style", "css", "sass"]
}
]
}
sassLoader: {
// `includePaths` is optional
includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')],
},
};
Result after preLoaders:
@import "compass";
.btn {
@include border-radius(1px, 1px);
}
If you don't have includePaths
configured, the result will be:
@import "~compass-mixins/lib/compass";
.btn {
@include border-radius(1px, 1px);
}
-
Make sure you have compass-mixins installed. If not try
npm install compass-mixins --save-dev
.Module build failed:
.btn {
^
File to import not found or unreadable: ~compass-mixins/lib/compass
-
If your have
includePaths
configured, make sure it's configured properly.Module build failed:
.btn {
^
File to import not found or unreadable: compass