使用 webpack 构建反应应用程序时如何同步类名？答案

【问题标题】：How can I sync class names when build react app with webpack?使用 webpack 构建反应应用程序时如何同步类名？
【发布时间】：2018-06-18 09:07:58
【问题描述】：

我正在使用 create-react-app 构建一个 React Web 应用程序。

如您所知，create-react-app 上有默认的 webpack 设置。它具有css-loader 相关设置，尤其是webpack.config.prod.js 具有css-loader 设置，如下所示。

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
        Object.assign({
                fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                        hmr: false,
                    },
                },
                use: [{
                        loader: require.resolve('css-loader'),
                        options: {
                            importLoaders: 1,
                            minimize: true,
                            sourceMap: shouldUseSourceMap,
                            modules: true,
                            localIdentName: '[path][name]__[local]--[hash:base64:5]'
                        },
                    },
                    {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-flexbugs-fixes'),
                                autoprefixer({
                                    browsers: [
                                        '>1%',
                                        'last 4 versions',
                                        'Firefox ESR',
                                        'not ie < 9', // React doesn't support IE8 anyway
                                    ],
                                    flexbox: 'no-2009',
                                }),
                            ],
                        },
                    },
                ],
            },
            extractTextPluginOptions
        )
    ),
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

它创建一个关于导入的 css 文件的外部 css 文件，这些文件具有转换的类名。

例如，如果我在如下节点模块中导入一个 css 文件，

import 'antd/dist/antd.min.css'

如果有一个类定义ant-input，它在实际构建文件夹中创建的css文件中变为node_modules-antd-dist-antd__ant-input--2iAqM，而我的标签仍然使用ant-input类。所以结果页面根本没有样式。如何使用此 css-loader 设置适当地应用样式？

【问题讨论】：

标签： javascript reactjs webpack create-react-app css-loader

【解决方案1】：

更改options 部分：

// before
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
  },
},
// after
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]___[hash:base64:5]"  
  },
},

在你的 Webpack 生产配置中做同样的事情

// before
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    minimize: true,
    sourceMap: true,
   },
},
// after
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true,
   },
},

【讨论】：