Question

我正在尝试以蚂蚁设计主题介绍我的全球风格。来自antd doc https://ant.design/docs/react/customize-theme 它说可以配置webpack来加载备用的较少文件和范围的全局样式

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )

#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }

我应该在哪里配置它？ Web Pack是否已与antd一起安装？还是应该将代码放在config-overrides.js中？

Answer 1

如果您想导入较少的样式，则需要添加配置文件.babelrc和postcss.config.js。

.babelrc：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
    ]
}

postcss.config.js：

module.exports = {
    plugins: {
        autoprefixer: {}
    }
};

webpack.config.js：

const webpack = require('webpack');

require("babel-core/register");
require("babel-polyfill");

module.exports = {
    entry: ['babel-polyfill', './src/index.jsx'],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.scss$/, // remove if not use scss styles
                use: [
                    {
                        loader: 'style-loader'
                    }, 
                    {
                        loader:'css-loader'
                    }, {
                        loader:'sass-loader'
                    }, {
                        loader:'postcss-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    }, 
                    {
                        loader:'css-loader'
                    }, {
                        loader:'sass-loader'
                    }, {
                        loader:'postcss-loader'
                    }
                ]
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: '@svgr/webpack',
                        options: {
                            babel: false,
                            icon: true,
                        },
                    },
                ],
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist', // update with the project directory
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist', // update with the project directory
        disableHostCheck: true,
        inline: true,
        hot: true,
        historyApiFallback: true,
        headers: { 
            "Access-Control-Allow-Origin": "*"
        }
    }
};

Answer 2

我遇到了同样的问题，并且设法解决了这个问题：

在src文件夹中创建具有以下内容的 myStylesReplacement.less 文件：
- #antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }
编辑您的 webpack.config.js 文件并添加：
- 在文件顶部添加const webpack = require('webpack'); const path = require('path')
- 在插件列表中添加new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(__dirname, 'src/myStylesReplacement.less') )
在您的应用中导入antd/lib/style/index.less

我希望这会对您有所帮助

在何处配置Webpack以加载较少的备用文件和范围全局样式

2 个答案: