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

问题描述

说我有类似的东西:

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

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

in my webpack config and I have a app/ sub folder with all my SCSS and JS files in.

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

Currently to import an SCSS partial I have to @import 'app/whatever/my_partial'; for it to be recognised.

如何设置加载器将 app/ 视为这些文件的资源根目录，以便我可以直接说 @import 'whatever/my_partial' ?

How can I set the loader to treat app/ as a resource root for these files so I can just say @import 'whatever/my_partial' ?

顺便说一下，这是与 Webpack 2.x 一起使用的.

This is with Webpack 2.x btw.

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

Any help from you clever people much appreciated!

推荐答案

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

You can add app/ to the includePaths option in the sass-loader. Your .scss rules has to be changed to:

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

这篇关于如何在我的 Webpack sass-loader 配置中为 SCSS 指定资源根目录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！