Angular2+Webpack3环境下SCSS导入Bourbon报错，如何解决？

我之前在类似的技术栈下也碰到过这个问题，本质是sass-loader不知道Bourbon的安装目录，所以没法解析@import "bourbon";这条语句。下面是一步步的解决方法：

1. 先确认Bourbon已经正确安装 #

如果还没安装Bourbon，先在项目根目录执行安装命令：

npm install bourbon --save-dev

如果已经装过，可以跳过这一步，但建议检查下package.json里有没有bourbon的依赖项，确保版本没问题。

2. 修改Webpack配置，给sass-loader添加includePaths #

找到你的Webpack配置文件（一般是webpack.config.js，或者分环境的webpack.dev.js/webpack.prod.js），定位到处理.scss文件的loader规则，修改成下面这样：

module: {
  rules: [
    // 保留你已有的其他loader规则...
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            // 这里自动获取Bourbon的安装路径
            includePaths: [require('bourbon').includePaths]
          }
        }
      ]
    }
  ]
}

用require('bourbon').includePaths的好处是不用手动写绝对路径，能适配不同的开发环境和项目目录结构。

3. 重启Webpack开发服务器 #

修改完配置后，一定要把正在运行的Webpack dev server关掉再重启，这样新的配置才能生效。

额外的检查项 #

• 确认你的app.scss里的导入语句是@import "bourbon";，不要加.scss后缀，也别拼错单词；
• 如果你的项目是基于Angular CLI但自定义了Webpack配置，那还要确保CLI的配置没有冲突，但你用的是Webpack 3的自定义配置，主要看上面的loader设置就够了。

按照这些步骤操作后，Webpack应该就能正确找到Bourbon的文件，不会再报找不到的错误了。

内容的提问来源于stack exchange，提问作者bier hier