我在用着
- macOS 莫哈韦 10.14 (18A391)
- Node.js 11.13.0
- npm 6.7.0
- 网络包 4.29.6
- CSS加载器2.1.1
- 萨斯 1.17.3
- 萨斯加载器 7.1.0
- 迷你 CSS 提取插件 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(),
],
};