react中antd+css Module一塊兒使用

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/,
                        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',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },