如何在我的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 btw。

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

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')]
      }
    }
  ]
}