Webpack - sass-loader can't figure out how includePaths work

I am a bit stuck, and right now I am at the verge of a breakdown. Someone, PLEASE enlighten me what is happening here. I am playing around with this for like 4 hours now, and can't seem to find out why this is happening!

TL/DR: Why is it, that webpack does not find my config.scss file based on the second includePath provided, but can resolve it based on the first? Yet it will resolve the test.scss file in any case?

I have the following webpack configuration:

 //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 ...
});

This loader will load the test.js file, which in my test example does nothing more, then loading a simple scss file, the test.scss. Here's how that file looks like:

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

@debug $test;

The dummy.scss file contains some css code for test, but no variables. It looks like this:

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

The config.scss file looks like this:

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

Here's the complete directory tree, relevant from the perspective of the scss

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

My expected output is that when I run webpack, a test.css file should be created in a folder, which should contain the only thing found in the dummy.scss and webpack should output my debug information on the screen.

Now if I try to run webpack like this, I get an error, that the $test variable is not defined, and no css file is created. But strangely, if I change the test.scss files first @use command to: @use 'config/config.scss' as * everything runs flawlesly: the .css file is created with the expected result, and the @debug command outputs the expected string on the screen.

Why is it, that webpack does not find my config.scss file based on the second includePath provided, but can resolve it based on the first?

Recommended topics

Hot tags