如何在我的 Webpack sass-loader 配置中指定 SCSS 的资源根目录？答案

【问题标题】：How can I specify a resource root for SCSS includes in my Webpack sass-loader config?如何在我的 Webpack sass-loader 配置中指定 SCSS 的资源根目录？
【发布时间】：2017-09-18 13:37:53
【问题描述】：

假设我有类似的东西：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}

在我的 webpack 配置中，我有一个 app/ 子文件夹，其中包含我所有的 SCSS 和 JS 文件。

目前要导入 SCSS 部分，我必须 @import 'app/whatever/my_partial'; 才能识别它。

如何将加载程序设置为将app/ 视为这些文件的资源根，这样我就可以说@import 'whatever/my_partial'？

这是使用 Webpack 2.x 顺便说一句。

非常感谢各位聪明人的帮助！

【问题讨论】：

标签： sass webpack libsass

【解决方案1】：

您可以将app/ 添加到sass-loader 中的includePaths 选项。您的.scss 规则必须更改为：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(process.cwd(), 'app')]
      }
    }
  ]
}

【讨论】：

太棒了！感谢那！不得不稍微改变一下，所以路径行读取includePaths: [path.resolve(process.cwd(), 'app')]（否则只是出错），但之后它工作得很好。（更新了你的答案——希望你不介意）