再次特别感谢奇哥哥的帮助,爱你呦!!!
css 样式按需导入
详细配置:https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE
下载所需库:
yarn add react-app-rewired customize-cra babel-plugin-import
修改 package.json 文件 中的 script 结点:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
项目根目录新建 config-overrides.js 文件:
const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: "css",
})
);
最后,重启项目,如果之前引入了 antd 的 css 文件,就可以把它删掉了。
修改默认主题颜色
antd 默认主题色为蓝色,如果要改为其他颜色,配置如下:
安装 less 和 lessloader
yarn add less less-loader@7.1.0
高版本的 less-loader 可能不支持下面配置文件的写法
配置 config-overrides.js 改为:
const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { "@primary-color": "green" },
},
})
);
在 12 行中修改颜色
重启项目,就可看到主题色被更改。