CSS charset rule is ignored in production mode.

When .scss file holds some non-ASCII character, then sass is adding @charset "UTF-8"; row to the begining of output css file. It works fine for “development” webpackge mode, but in “production” mode this css rule is not being added.

• Operating System: Windows 10
• Node Version: 14.17.0
• NPM Version: 6.14.13
• webpack Version: ^5.11.1
• sass-loader Version: ^12.1.0
• sass: ^1.35.1

Expected Behavior

With webpack “production” mode, css charset rule is also added to output css file.

Actual Behavior

With webpack “production” mode, css charset rule is not being added.

Code

// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mode = process.env.NODE_ENV || "development";
const target = process.env.NODE_ENV === "production" ? "browserslist" : "web";

module.exports = {
  mode: mode,
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [{
        test: /\.(s[ac]|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
    },{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
    }],
  },
  target: target,
  devtool: "source-map",
  devServer: { contentBase: "./dist" },
};

How Do We Reproduce?

Follow instructions in this repo - https://github.com/scream87/css-charset-with-sass-loader

[Danon]

@alexander-akait Was the bug reported in dart-sass/sass?

I found this issue: https://github.com/sass/dart-sass/issues/1387 And the author claims removing @charset in compressed isn’t a bug. Can you relate?

CC: @scream87

[scream87]

Ok, I see. Thanks for the operative and quick reaction. Since it is not sass-loader bug, I am closing this issue.