包括SCSS文件(webpack)中的"波旁威士忌"

Question

我正试图让波旁威士忌(SCSS混音包等(、节点sass和webpack和谐工作。

运行webpackbuild命令后，我得到以下错误：

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%));

注意，webpack并没有抱怨@import。查看构建文件夹，编译后的CSS实际上只包含normalize.CSS代码。

设置

我安装了以下软件包：

• 波旁威士忌
• 节点sass
• css加载程序
• 样式加载器
• sass装载机
• webpack
• webpack cli
• webpack开发服务器
• postpass加载程序
• 自动改装器
• html webpack插件
• 迷你css提取插件

我的条目JS文件只导入normalize.css和我的自定义style.scss。SCSS文件只包含一个测试波旁威士忌的简单设置：

@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%));
}

这是我的CSS管道：

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]
}
}
}
]

Answer 1

波旁似乎在v5中删除了许多前缀功能，包括transformmixin。

如果运气好的话，你应该能够通过替换代码中的任何实例来让它工作：

@include transform(translate(-50%, -50%));

…用这个：

transform: translate(-50%, -50%);