其他分享
首页 > 其他分享> > antd按需引入 + 自定义主题

antd按需引入 + 自定义主题

作者:互联网

//1.安装依赖 npm add react-app-rewired customize-cra babel-plugin-import less less-loader

//2.修改package.json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

//3.根目录中创建config-overrides.js(package.json的同级目录)

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": "orange"}    // 将antd中的主颜色蓝色改变为橙色
        }
    })
);
 
//4.删除组建中引入的样式的代码 即: import "antd/dist/antd.css"

标签:自定义,less,app,react,import,引入,antd,rewired
来源: https://www.cnblogs.com/wuliangjie/p/14327096.html