Question

我正在使用create-react-app构建反应式网络应用。

如您所知，create-react-app上有默认的网络包设置。它具有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设置正确应用样式？

Answer 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,
   },
},

有关how to use css modules with create react app

的更多信息

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

1 个答案: