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,

Answer 2

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

你可以使用最小化：！isDebug和isDebug是一个bool，知道你是否正在调试。但设置为false应该留下“好名字”

在PostCSS中更好的类名

2 个答案: