PostCSS 中更好的 class 名称

Question

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

  {
    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')(),
          ],
        },
      },
    ],
  },

现在，问题是，这会生成非常难看的 class 名称。使用 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 选项，但没有任何效果。

那么，如何在生成的 class 名称中保留原来的 class 名称？

Answer 1

{
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      minimize: false, //this line!!
    },
  },

你可以使用 minimize: !isDebug 和 isDebug 是一个布尔值来知道你是否在调试。但设置为 false 应该离开 "nice names"

Answer 2

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

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

PostCSS 中更好的 class 名称

Nicer class names in PostCSS

postcss

webpack-2