react中antd+css Module一起使用

冷不防 2021-12-21 04:13 242阅读 0赞

#### antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。 ####

使用 exclude 和 include 配置参考([https://segmentfault.com/q/1010000011223900][https_segmentfault.com_q_1010000011223900]),修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件，在与antd一起使用时可能出现错误，单独写一条规则)，所以我们只能两个来处理css的loader。

在react中使用antd+less+css modules参考（https://www.jianshu.com/p/51ff1c8be301）

// ant的按需加载
                        {
                            test: /\.css$/,
                            include: /node_modules/,
                            use: [
                                require.resolve('style-loader'),
                                {
                                    loader: require.resolve('css-loader'),
                                    options: {
                                        importLoaders: 1,
                                    },
                                },
                                {
                                    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',
                                            }),
                                        ],
                                    },
                                },
                            ],
                        },

// 正常的网页中的css
                        {
                            test: /\.css$/,
                            exclude: /node_modules/,
                            use: [
                                require.resolve('style-loader'),
                                {
                                    loader: require.resolve('css-loader'),
                                    options: {
                                        importLoaders: 1,
                                        modules: true,
                                        localIdentName: "[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',
                                            }),
                                        ],
                                    },
                                },
                            ],
                        },

转载于:https://www.cnblogs.com/lanshu123/p/10660707.html

[https_segmentfault.com_q_1010000011223900]: https://link.jianshu.com/?t=https%3A%2F%2Fsegmentfault.com%2Fq%2F1010000011223900