MiniCssExtractPlugin 乱码并混淆了我的 class 个名字

Question

我在我的打字稿和 webpack 项目中使用 MiniCssExtractPlugin。

我的 MiniCssExtractPlugin webpack 配置看起来像

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
   entry: './src/index.tsx',
   mode: "development",
   output: {
      path: path.resolve(__dirname, "build"),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader"
         },
         {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
         },
         {
            test: /\.scss$/,
            use: [
               MiniCssExtractPlugin.loader,
               {
                 loader: "css-loader",
                 options: {
                   modules: true,
                   sourceMap: true,
                   importLoader: 2
                 }
               },
               "sass-loader"
            ]
         }
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: "./index.html"
      }),
      new MiniCssExtractPlugin({
         filename: "foo.css",
         chunkFilename: "[id].css"
      })],
   devtool: "source-map",
   resolve: {
      extensions: [".js", ".ts", ".tsx"] 
   }
}

现在我项目中的scss文件有这个片段

h1 {
   border-bottom: 3px solid #880055;
   display: inline;
}

.container {
   font-size: 1.3rem;
}

.is-completed {
   text-decoration: line-through;
   color: #00ff00;
}

当我的应用程序运行使用 npm start 时，我可以看到标题 H1 有一条颜色为 880055 的下划线。所以这意味着我的 scss 文件被正确读取了。

如果我进入 chrome 开发人员工具并进入网络选项卡并查找 CSS。我可以看到 foo.css 正在下载。如果我查看 foo.css

的内容

它没有我的 "is-completed" class。相反，我看到了类似

的东西

h1 {
  border-bottom: 3px solid #880055;
  display: inline; }

.pxcHIyOVHeytUeG27u4TO {
  font-size: 1.3rem; }

._1Z5_KVJNKd1X2P3HKM63j {
  text-decoration: line-through;
  color: #00ff00; }

所以像h1这样的元素class是好的，其他都是乱码。怎么回事？

Answer 1

当您在 CSS 配置中设置 modules: true 时，您是在告诉 css-loader 使用 CSS-Modules 将您的 class 名称限定在特定文件中.

Answer 2

您可以使用 css-loader 选项中的 localIndentName 查询参数来指定您希望生成的 class（标识符）在开发 and/or 中的样子产品。请参阅下面的示例，了解是什么为我解决了这个问题。

 module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[name]-[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
};

如果我要使用上面示例中的配置并且我正在渲染的组件的名称称为 HelloWorld 并且该组件中使用的 class 是 .container ，如果我要运行我的应用程序（开发或生产）并检查 devtools 中的元素，我的 HelloWorld 组件上的 class 显示如下：

<div class="HelloWorld-container--16ABh"> Hello World </div>

您可以尝试设置为 localIdentName 的内容以及显示的散列字符数。

请在此处查看 localIdentName 查询参数的文档：https://github.com/webpack-contrib/css-loader#localidentname

MiniCssExtractPlugin 乱码并混淆了我的 class 个名字

MiniCssExtractPlugin is garbling and obfuscating my class names

css

webpack

mini-css-extract-plugin