antd组件样式无效问题

webpack版本： 4.6.0

webpack.config.js加入以下处理：

　　找到babel-loader的query/options字段并加入：

 [  "import",{libraryName: "antd", style: 'css'}] // antd按需加载

例如：

module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            include: [path.resolve(__dirname, 'src'), /node_modules[\\/]scratch-[^\\/]+[\\/]src/],
            options: {
                // Explicitly disable babelrc so we don't catch various config
                // in much lower dependencies.
                babelrc: false,
                plugins: [
                    '@babel/plugin-syntax-dynamic-import',
                    '@babel/plugin-transform-async-to-generator',
                    '@babel/plugin-proposal-object-rest-spread',
                    ['react-intl', {
                        messagesDir: './translations/messages/'
                    }],
　　　　　　　　　　　　["import", {libraryName: "antd", style: 'css'} ]
                ],
                presets: [
                    ['@babel/preset-env', {targets: {browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']}}],
                    '@babel/preset-react'
                ]
            }
        },
}

并安装依赖 babel-plugin-import

        {
            test: /\.css$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                // options: {
                //     modules: true,
                //     importLoaders: 1,
                //     localIdentName: '[name]_[local]_[hash:base64:5]',
                //     camelCase: true
                // }
            }, {
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: function () {
                        return [
                            postcssImport,
                            postcssVars,
                            autoprefixer({
                                browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
                            })
                        ];
                    }
                }
            }]
        }
** 重点 为注释部分，webpack2.x,ant目前只支持webpack1.x，不过可以通过扩展方式解决，（不要在 antd 的 css 上用 css modules。）

转载于:https://www.cnblogs.com/bigsister/p/9923071.html

antd组件 样式无效问题

浏览过的版块

antd组件样式无效问题