Question

我正在使用

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

预期行为

呈现的HTML

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

CSS类根据需要呈现

实际行为

源代码

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

webpack css-loader转义问题

预期行为

实际行为

webpack.config.js

1 个答案: