webpack css-loader逃避问题

Question

我正在使用

• macOS Mojave 10.14（18A391）
• Node.js 11.13.0
• 高于6.7.0
• webpack 4.29.6
• css-loader 2.1.1
• sass 1.17.3
• sass-loader 7.1.0
• mini-css-extract-plugin 0.5.0

Expected Behavior

呈现HTML

<div class="m_x_@"></div>

CSS类按我想要的方式呈现

Actual Behavior

源代码

SCSS

.m_x_\@ {
  margin-left: auto !important;
  margin-right: auto !important;
}

JSX

/*
 * @flow
 */

import * as React from 'react';

import design from './design.scss';

class Test extends React.Component<P: {

}> {
  render () {
    return <div className={design['m_x_@']} />;
  }
}

export default Test;

呈现HTML

<div class="m_x_----wB9u"></div>

CSS类被渲染，因为我不想要

而不是m_x_ @我得到m_x _---- wB9u（坏转义）

webpack.config.js

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const sass = require('sass');

const isProduction = process.env.NODE_ENV === 'production';

const js = {
  exclude: /node_modules/,
  test: /\.js$/,
  use: [
    {
      loader: 'babel-loader',
    },
  ],
};

module.exports = {
  devtool: isProduction ? '' : 'source-map',
  entry: {
    index: path.resolve(__dirname, 'private/index.js'),
  },
  mode: 'development',
  module: {
    rules: [
      js,
      {
        exclude: /node_modules/,
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              localIdentName: isProduction ? '[hash:base64:8]' : '[local]--[hash:base64:4]',
              modules: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
              ],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

Answer 1

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高，加上连字符（ - ）和下划线（ _）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆W？”可以写成“B \＆W \？”或“B \ 26 W \ 3F”。

资料来源：http://www.w3.org/TR/CSS21/syndata.html#characters