webpack - webpack css-loader エスケープの問題

Question

私は使用しています

• macOS モハーベ 10.14 (18A391)
• Node.js 11.13.0
• npm 6.7.0
• ウェブパック 4.29.6
• css-loader 2.1.1
• サス1.17.3
• サスローダー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(),
  ],
};