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

Question

说我有类似的东西：

{
  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 顺便说一句。

非常感谢您聪明人的任何帮助！

Answer 1

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

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