按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式,同时修改 config-overrides.js 文件如下。
- 下载安装
yarn add less less-loader
- const {
override, fixBabelImports } = require('customize-cra');
+ const {
override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: {
'@primary-color': '#1DA57A' },
+ }),
);
修改后重启 yarn start,如果看到一个绿色的按钮就说明配置成功了。官方文档