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)
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”,