react 中按需引入antd样式的操作按照官网上V3.X版本的来操作就行
我现在使用的是V4.X版本,按照官网的方式来操作自定义主题会有冲突,也不能成功的更改主题
以下是我在 ‘react-app-rewired’ 方式按需引入样式的条件下,自定义主题的步骤:
- 执行 npm i less less-loader
- 更改
config-overrides.js文件,代码如下
const {override, fixBabelImports, addLessLoader, adjustStyleLoaders} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {'@primary-color': '#fa73c9'},
}
}),
adjustStyleLoaders(({use: [, , postcss]}) => {
const postcssOptions = postcss.options;
postcss.options = {postcssOptions};
})
);
通过修改primary-color来更改主题颜色
但是,在第一次更改成功后,我发现之后再修改颜色都无法成功。看起来只能修改一次颜色
我观察了第一次修改和之后修改时页面加载的速度(都是重新npm start):第一次的时间会长一些,之后的速度就变快了(也失败了)
我想这可能是第一次在重新加载less的原因?(我不是很明白)然后后面的第二第三次就不重新加载了?
基于上面的猜测,我打算让浏览器运行的时候重新加载less 和 less-loader模块
我的方法是把package.json中的less 和less-loader这俩删了保存然后运行(这方法很蠢,但是解决了问题)
运行成功后再把删的这俩给加上,保存再运行自然也是可以的








