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

Question

我正在创建一个与webpack. 我正在sass项目中使用，所有scss文件都位于scss根目录中。我在名为 的目录中创建了一些部分内容partials。目录结构如下所示：

\n

测验应用程序的目录结构

\n

在文件的顶部quiz.module.scss，我有这个：

\n

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

\n

我不想写@use "partials/colors"and @use "partials/font"，所以我决定将其包含在所使用的scss/partials列表中。我的某个地方有这个loadPathsscsswebpack.dev.js：

\n

const PATHS_TO_SASS_PARTIALS = ["scss/partials"]\n

\n

这在其他地方：

\n

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

\n

我认为当我写入类似 的文件时，这应该指向webpack加载文件，但它不起作用。当我运行时出现以下错误：_colors.scss@use "colors" as *;quiz.module.scsswebpack-dev-server

\n

SassError: Can\'t find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @use "colors" as *;\n  \xe2\x94\x82 ^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  scss\\quiz.module.scss 1:1  root stylesheet\n

\n

我做错了什么或者该loadPaths选项不起作用吗sass-loader？我不想写@use "partials/colors"。我期望该loadPaths选项将被传递sass-loader到sass并且@use将直接工作，如上所述。

\n

sass我在某处读到 sass 加载路径是相对于调用路径进行评估的。这可能是错误的原因。我不知道。我只是假设，由于我是webpack-dev-server在命令行上从项目的根目录开始的，因此sass-loader和sass也会从同一个地方调用。

\n

任何形式的帮助将非常感激。

\n