sass-loader: SassError: This file is already being loaded (when using additionalData)

  • Operating System: Windows 10
  • Node Version: 12.14.1
  • NPM Version: 6.14.8
  • webpack Version: 5.10.3
  • sass-loader Version: 10.1.0

Expected Behavior

additionalData should work like prependData.

Actual Behavior

additionalData causes compile error (I think).

Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
SassError: This file is already being loaded.
  ╷
1 │ @import "app/scss/themes/default.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app\scss\themes\default.scss 1:9  root stylesheet

Code

// webpack.config.js
{
          test: /\.(css|scss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: { modules: false, importLoaders: 1 }
            },
            "postcss-loader",
            {
              loader: "sass-loader",
              options: {
                additionalData: `@import "app/scss/themes/${theme}.scss";`
              }
            }
          ]
        }

How Do We Reproduce?

Well, I hope you only need to use the above code, more or less. I’ve been working through a webpack 4 to 5 upgrade and followed the advice to upgrade all loaders. I used to use prependData to prepend a theme file @import to all my SCSS files. After upgrading, I noticed that has changed to additionalData but I can’t get it to work. I get the above error, that the file has already been imported. I can’t rule out there is another cause but I also don’t know what should be so complicated here. Am I overlooking something or is there an error with additionalData?

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (6 by maintainers)

Most upvoted comments

The same problem arises, version: “sass-loader”: “^10.1.1”, tip: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: This file is already being loaded.

Issue fixed after demotion: “sass-loader”: “^8.0.2”,