I'm trying to get bourbon (package for SCSS mixins etc.), node-sass and webpack to work in harmony.
After running the webpack build command I get the following error:
ERROR in ./src/sass/style.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: no mixin named transform
on line 12 of /home/navix/code/unsub-page/src/sass/style.scss
>> @include transform(translate(-50%, -50%));
Notice webpack is not complaining about the @import, though. Looking at the build folder, the compiled CSS indeed only comprises the normalize.css code.
Setup
I have the following packages installed:
- bourbon
- node-sass
- css-loader
- style-loader
- sass-loader
- webpack
- webpack-cli
- webpack-dev-server
- postcss-loader
- autoprefixer
- html-webpack-plugin
- mini-css-extract-plugin
My entry JS file just imports normalize.css and my custom style.scss. The SCSS file just contains a simple setup to test bourbon:
@import 'bourbon';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300');
body {
height: 100%;
font-size: 16px;
background: #1d77ef;
}
.select-ctr {
@include position(absolute, 50% x x 50%);
@include transform(translate(-50%, -50%));
}
This is my CSS pipeline:
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')()]
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
includePaths: [require('bourbon').includePaths]
}
}
}
]
