проблема с выходом из webpack css-loader - PullRequest
Новая
       57

проблема с выходом из webpack css-loader

0 голосов
/ 03 апреля 2019

Я использую

  • macOS Мохаве 10,14 (18A391)
  • Node.js 11.13.0
  • нпм 6,7,0
  • webpack 4.29.6
  • css-загрузчик 2.1.1
  • sass 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(),
  ],
};

1 Ответ

0 голосов
/ 03 апреля 2019

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [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

...