React学习笔记_css module

来源：互联网发布：java 两list合并编辑：程序博客网时间：2024/05/21 09:57

让react antd 支持 css module 和 less moduel

问题配置了less module 会和 antd 的less 冲突。
解决方式使用module的less 文件命名规则。index.module.less

一、配置css 支持 css module

设置css-loader的options

importLoaders: 1,
modules: true, // 新增对css modules的支持

import styles from './index.css';

{                test: /\.css$/,                use: [                    require.resolve('style-loader'),                    {                        loader: require.resolve('css-loader'),                        options: {                            importLoaders: 1,                            modules: true,   // 新增对css modules的支持                        },                    },                    {                        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',                                }),                            ],                        },                    },                ],            },

二、让 less 支持less module

为了解决和antd的配置冲突。文件命名增加module
对less 结尾的文件的 css-loader 的options 进行设置。

import styles from './index.module.less';

注意 less 文件的命名为 index.module.less

{                test: /\.less$/,                use: [                    require.resolve('style-loader'),                    ({ resource }) => ({                        loader: 'css-loader',                        options: {                            importLoaders: 1,                            modules: /\.module\.less/.test(resource),                            localIdentName: '[name]__[local]___[hash:base64:5]',                        },                    }),                    {                        loader: require.resolve('postcss-loader'),                        options: {                            ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options                            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',                                }),                            ],                        },                    },                    {                        loader: require.resolve('less-loader'),                        options: {                            modifyVars: {"@primary-color": "#404040"},                        },                    },                ],            }

阅读全文

0 0