如何将 loadPath 与 sass-loader 和 webpack 一起使用？

Question

我正在创建一个与

webpack

捆绑在一起的小应用程序。我在项目中使用

sass

，所有

scss

文件都位于根目录中的

scss

中。我在名为

partials

的目录中创建了一些部分内容。目录结构如下所示：

在

quiz.module.scss

文件的顶部，我有这个：

@use "colors" as *;
@use "font";

我不想写

@use "partials/colors"

和

@use "partials/font"

，所以我决定将

scss/partials

包含在

loadPaths

使用的

scss

列表中。我的

webpack.dev.js

文件中有这个：

const PATHS_TO_SASS_PARTIALS = ["scss/partials"]

还有其他地方：

{
  test: /\.module\.scss$/,
  use: [
    {
      loader: "style-loader"
    },
    {
      loader: "css-loader",
      options: {
        modules: {
          mode: "local"
        }
      }
    },
    {
      loader: "resolve-url-loader"
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
        sassOptions: {
          loadPaths: PATHS_TO_SASS_PARTIALS
        }
      }
    }
  ]
}

我认为当我在像

webpack

这样的文件中写入

_colors.scss

时，这应该指向

@use "colors" as *;

加载

quiz.module.scss

文件，但它不起作用。当我运行

webpack-dev-server

时出现以下错误：

SassError: Can't find stylesheet to import.
  ╷
1 │ @use "colors" as *;
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  scss\quiz.module.scss 1:1  root stylesheet

我做错了什么或者

loadPaths

选项不适用于

sass-loader

吗？我不想写

@use "partials/colors"

。我期望

loadPaths

选项将由

sass-loader

传递到

sass

并且

@use

将直接按上面提到的方式工作。

我在某处读到，sass 加载路径是相对于调用

sass

的路径进行评估的。这可能是错误的原因。我不知道。我假设由于我在命令行上从项目的根目录启动

webpack-dev-server

，因此

sass-loader

和

sass

也将从同一个位置调用。

任何形式的帮助将不胜感激。

Answer 1

奇怪的是，loadPaths属性不起作用，对我有用的是使用includePaths：

                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            includePaths: [path.resolve(__dirname, 'Develop', 'Styles')]
                        }
                    }
                }