从SCSS文件（webpack）中包含`bourbon`

Question

我正在尝试使bourbon（用于SCSS mixins等的程序包），node-sass和webpack协调工作。

运行webpack build命令后，出现以下错误：

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。查看build文件夹，编译后的CSS实际上仅包含normalize.css代码。

设置

我已安装以下packages：

• 波旁
• node-sass
• css-loader
• 样式加载器
• sass-loader
• webpack
• webpack-cli
• webpack-dev-server
• postcss-loader
• 自动前缀
• html-webpack-plugin
• mini-css-extract-plugin

我的入口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中的Bourbon removed a number of prefixing features，包括transform mixin。

很幸运，您可以通过替换代码中的任何实例来使其正常工作：

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

…与此：

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