React学习笔记_css module

让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"},
                        },
                    },
                ],
            }