Webpack - sass-loader 无法弄清楚 includePaths 是如何工作的

Question

我有点陷入困境，现在我正处于崩溃的边缘。有人请告诉我这里发生了什么。我现在已经玩了大约 4 个小时了，似乎无法找出为什么会发生这种情况！

TL/DR：为什么根据提供的第二个文件webpack找不到我的文件，但可以根据第一个文件解决它？但无论如何它都会解析该文件吗？config.scssincludePathtest.scss

我有以下 webpack 配置：

 //webpack.config.js
 ... unrelated code ...
 module.exports = merge(common, {
     ... unrelated code ...
     modules: {
         rules: [
             {
                 test: /\.s(a|c)ss$/,
                 exclude: /\.module.(s(a|c)ss)$/,
                 loader: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            implementation: require('sass'),
                            sassOptions: {
                                importer: globImporter(),
                                includePaths: [path.resolve(__dirname, './src/main/'), path.resolve(__dirname, './src/main/config/')]
                            }
                        },
                    }
                ]
            }
         ]
    },
    ... unrelated code ...
});

该加载器将加载该test.js文件，在我的测试示例中仅执行此操作，然后加载一个简单的scss文件，即test.scss. 该文件如下所示：

// src/entry/test.scss
@use 'config' as *;
@use 'dummy' as *;

@debug $test;

该dummy.scss文件包含一些用于测试的 css 代码，但没有变量。它看起来像这样：

// src/main/dummy.scss
body {
  font-size: 50rem;
}

该config.scss文件如下所示：

// src/main/config/config.scss
$test: "TEST VALUE";

这是完整的目录树，从 scss 的角度来看相关

src/
   main/
       config/
           config.scss
       dummy.scss
   entry/
       test.scss

我的预期输出是，当我运行 webpack 时，test.css应该在文件夹中创建一个文件，该文件应该包含在 中找到的唯一内容dummy.scss，并且 webpack 应该在屏幕上输出我的调试信息。

现在，如果我尝试像这样运行 webpack，我会收到一个错误，即变量$test未定义，并且没有css创建文件。但奇怪的是，如果我将test.scss文件第一个@use命令更改为：@use 'config/config.scss' as *一切都运行完美：.css文件是按预期结果创建的，并且@debug命令在屏幕上输出预期的字符串。

为什么根据提供的第二个文件webpack找不到我的文件，但可以根据第一个文件解决它？config.scssincludePath