新版React脚手架更改antd主题

最新推荐文章于 2025-05-25 10:34:01 发布

转载最新推荐文章于 2025-05-25 10:34:01 发布 · 1.9k 阅读

React 同时被 2 个专栏收录

14 篇文章

订阅专栏

webpack

5 篇文章

订阅专栏

本文详细介绍了如何使用Ant Design进行主题定制，通过修改Webpack配置实现less变量覆盖，包括在dev和prod环境下如何正确设置style加载器，以及预处理器less-loader的配置细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.cnblogs.com/wuqun/p/10131483.html

新版脚手架修改主题主要有两点 (*･ω-q)

1、webpack.config.dev.js和 …prod.js中 style必须为true，而不是css

          plugins: [
            [
              require.resolve('babel-plugin-named-asset-import'),
              {
                loaderMap: {
                  svg: {
                    ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                  },
                },
              },
            ],

//style设置成true!!!
[“import”, {
“libraryName”: “antd”,
“libraryDirectory”: “es”,
“style”: true // style: true 会加载 less 文件
}]
],
2、修改webpack.config.dev.js

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve(‘style-loader’),
{
loader: require.resolve(‘css-loader’),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve(‘postcss-loader’),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: ‘postcss’,
plugins: () => [
require(‘postcss-flexbugs-fixes’),
require(‘postcss-preset-env’)({
autoprefixer: {
flexbox: ‘no-2009’,
},
stage: 3,
}),
],
},
},
];
if (preProcessor) {
// loaders.push(require.resolve(preProcessor));
//添加修改代码
let loader = require.resolve(preProcessor)
if (preProcessor === “less-loader”) {
loader = {
loader,
options: {
modifyVars: {
‘primary-color’:’#DC143C’,
‘link-color’: ‘#1DA57A’,
‘border-radius-base’: ‘2px’,
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
};
修改webpack.config.prod.js

const loaders = [
{
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: ‘…/…/’ } : undefined
),
},
{
loader: require.resolve(‘css-loader’),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve(‘postcss-loader’),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: ‘postcss’,
plugins: () => [
require(‘postcss-flexbugs-fixes’),
require(‘postcss-preset-env’)({
autoprefixer: {
flexbox: ‘no-2009’,
},
stage: 3,
}),
],
sourceMap: shouldUseSourceMap,
},
},
];
if (preProcessor) {
// loaders.push({
// loader: require.resolve(preProcessor),
// options: {
// sourceMap: shouldUseSourceMap,
// },
// }
//修改添加代码
if (preProcessor === “less-loader”) {
loader.options.modifyVars = {
‘primary-color’: ‘#DC143C’,
‘link-color’: ‘#1DA57A’,
‘border-radius-base’: ‘2px’,
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}
return loaders;
};