如何在我的 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/添加到sass-loader中的includePaths选项。您的 .scss 规则必须更改为：

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

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

How can I specify a resource root for SCSS includes in my Webpack sass-loader config?

sass

webpack

libsass