additionalData option does not work

[IvanSavoskin]

• Operating System: macOS 11.2.3
• Node Version: v14.15.3
• NPM Version: 7.6.3
• webpack Version: 5.24.4
• sass-loader Version: 11.0.1

Expected Behavior

Adding an import line to a specific .scss file using the additionalData option

Actual Behavior

The line is not added, the file remains exactly the same as it was

Code

Trying to add imports with just a line

// webpack.config.js
module: {
        rules: [{
            test: /\.scss$/,
            include: [PATHS.global],
            use: ["style-loader", "css-loader", "sass-loader"]
        }, {
            test: /\.scss$/,
            include: [PATHS.variables],
            use:
                ["style-loader", "css-loader", {
                    loader: "sass-loader",
                    options: {
                        additionalData: `@import "src/styles/themes/${theme}Theme.scss";`
                    }
                }]
        }, {
            test: /\.scss$/,
            exclude: [/node_modules/, PATHS.global, PATHS.variables],
            use: [
                "style-loader", {
                    loader: "css-loader",
                    options: {
                        import: true,
                        sourceMap: true,
                        modules: {
                            mode: "local",
                            localIdentName: "[path][name]__[local]--[hash]",
                            exportLocalsConvention: "camelCase"
                        }
                    }
                }, {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: true,
                        postcssOptions: {
                            config: path.resolve(__dirname, "postcss.config.js")
                        }
                    }
                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }
            ]
        },
        ...
        ]
    }

Trying to add imports using a function

// webpack.config.js
module: {
        ...
        {
            test: /\.scss$/,
            include: [PATHS.variables],
            use:
                ["style-loader", "css-loader", {
                    loader: "sass-loader",
                    options: {
                        additionalData: (content: string) => `@import "src/styles/themes/${theme}Theme.scss";\n${content}`
                    }
                }]
        }
        ...
     ]
    }

The file where you want to add the import

// variables.scss
$header-height: 50px;
$ext-line-height: 45px;
$editor-tabs-height: 30px;
$wizard-action-height: 65px;
$app-height: calc(100vh - #{$header-height});
$content-height: calc(#{$app-height} - #{2*$ext-line-height});
$wizard-height: $app-height;
$wizard-content-height: calc(#{$wizard-height} - #{$wizard-action-height});

[alexander-akait]

You have include: [PATHS.variables], double check this, we have a lot of test on this options, so it should work, you ignore ### How Do We Reproduce?, so I can't help, sorry, anyway if you create reproducible test repo I will say you why it is not working, without additional information I can't help

[IvanSavoskin]

PATHS.variables = path.resolve(__dirname, "../src/styles/variables.scss"); The path is correct, if you go through the debug, then the addtionalData function is entered. but no result. If you do this for the global file, then everything works

[IvanSavoskin]

PATHS.global = path.resolve(__dirname, "../src/styles/globals.scss")

Here is the code for the global file

@import "variables";
$fa-font-path: "~font-awesome/fonts/";
$flags-image-path: "~semantic-ui-sass/images/";
$icons-font-path: "~semantic-ui-sass/icons/";
$font-family: $default-font-family;
@import "~semantic-ui-sass/semantic-ui";
@import "~font-awesome/scss/font-awesome";
@import "~react-tabulator/lib/css/bootstrap/tabulator_bootstrap4.min.css";
@import "~react-tabulator/lib/styles.css";

[alexander-akait]

You can't do it for special import/use only for import styles from './styles.scss' or for entrypoint

[IvanSavoskin]

I didn't quite understand. What is the difference between globals.scss and variables.scss in this case? A line is added in the globals.scss file via additionalData

[alexander-akait]

Different it now you import your SCSS, we can't modify content inside @import/@use, it is limitation

[IvanSavoskin]

That is, there is no way for me to set a variable with the import of a specific file, so that later it can be used in other files?

[alexander-akait]

Yes, node-sass/dart-sass limitation

[IvanSavoskin]

Got it, thanks a lot for the clarification