【问题标题】：Include `bourbon` from SCSS file (webpack)从 SCSS 文件 (webpack) 中包含 `bourbon`
【发布时间】：2020-06-16 09:13:12
【问题描述】：

我正在尝试让 bourbon（SCSS mixins 等的包）、node-sass 和 webpack 和谐地工作。

运行 webpack 构建命令后出现以下错误：

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 代码。

设置

我安装了以下软件包：

波旁威士忌
节点-sass
css 加载器
样式加载器
sass 加载器
网页包
webpack-cli
webpack-dev-server
postcss 加载器
自动前缀
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]
      }
    }
  }
]

【问题讨论】：

标签： node.js webpack import sass bourbon

【解决方案1】：

似乎波旁威士忌在 v5 中 removed a number of prefixing features，包括 transform mixin。

如果运气好的话，您应该可以通过在代码中替换 this 的任何实例来使其正常工作：

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

…用这个：

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

【讨论】：