webpack-2 - PostCSS 中更好的类名

Question

我正在使用 Webpack 2 构建我的应用程序。我使用 PostCSS 2 作为 CSS 模块。这是我的 Webpack CSS 导入配置:

  {
    test: /\.css$/,
    exclude: /(node_modules)/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: loader => [
            require("postcss-import")({
              path: './js',
              addDependencyTo: webpack,
            }),
            require('postcss-cssnext')(),
          ],
        },
      },
    ],
  },

现在的问题是，这会生成非常难看的类名。使用 React 的示例:

import React, {Component} from 'react';
import styles from './Element.css';

export default class Element extends Component{
  render(){
    return (
      <div className={styles.myElement}>This is an example.</div>
    );
  }
}

渲染为:

<div class="_1DHVkmCxFFQMFYac-L_MIg">This is an example.</div>

现在，这在生产中很好，但在开发中，像 class="myElement--_1DHVkmCxFFQMFYac-L_MIg" 这样的东西会更好。我找到了GitHub issue讨论这个问题，但由于我是 Webpack 的新手，我不知道如何实现他们的建议。无论我尝试什么都会导致错误，Webpack 无法解析该模块。

我尝试将 localIdentName: '[local]--[hash:base64:5]' 添加到 postcss-loader 选项，但这没有任何作用。

那么，如何在生成的类名中保留原始类名呢？

Answer 1

将此行添加到 css-loader 解决了它:

localIdentName: debug ? '[name]_[local]___[hash:base64:10]' : undefined,