Description
- Operating System: Windows 10
- Node Version: v14.14.0
- NPM Version: 6.14.8
- webpack Version: 5.1.3
- css-loader Version: 5.0.0
Expected Behavior
The @charset declaration at the top of the generated CSS file.
Actual Behavior
The @charset declaration is below the imported CSS. To determine fallback encoding the @charset declaration must be at the start of the file (https://drafts.csswg.org/css-syntax-3/#determine-the-fallback-encoding).
The sass-loader automatically prepends @charset "UTF-8" (or BOM if in compressed mode). This information seems to be lost after sending the CSS string through the css-loader.
Code
Expected CSS:
@charset "utf-8";
p {
color: red;
font-size: 72px;
}
.greet::before {
color: blue;
content: 'Привет, ';
}Actual CSS:
p {
color: red;
font-size: 72px;
}
@charset "utf-8";
.greet::before {
color: blue;
content: 'Привет, ';
}How Do We Reproduce?
https://github.com/intemarkus/css-loader-charset-error
npm install
npm run build
Open dist/index.html in browser with file://.../css-loader-charset-error/dist/index.html
In some browsers (Chrome, IE, Edge) the CSS content isn't read as UTF-8.
The CSS file is generated with the MiniCssExtractPlugin, but the direct result of the css-loader is printed in the console window.