react中antd+css Module一起使用

发布时间：2020-12-15 20:32:42 所属栏目：百科来源：网络整理

导读：antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。使用 exclude 和 include 配置参考(https://segmentfault.com/q/1010000011223900),修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用

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

使用 exclude 和 include 配置参考(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/,modules: true,localIdentName: "[name]__[local]___[hash:base64:5]",

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!