Ant Design 按需加载css

实现antd 样式按需引入

npm i react-app-rewired customize-cra

1.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

代码语言：javascript复制

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

2.自定义配置后要修改package.json

代码语言：javascript复制

/* package.json */
"scripts": {
-   "start": "react-scripts start",
    "start": "react-app-rewired start",
-   "build": "react-scripts build",
    "build": "react-app-rewired build",
-   "test": "react-scripts test",
    "test": "react-app-rewired test",
}

3.下载babel-plugin-import npm i babel-plugin-import

4.修改 config-overrides.js文件

代码语言：javascript复制

 const { override, fixBabelImports } = require('customize-cra');

// import 标识按需引入
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd', // 按需引入的库
     libraryDirectory: 'es', // 模块化规范
     style: 'css',
   }),
 );

5.取消之前自己引入的样式即可

antd 实现自定义主题

npm i less less-loader

1.修改 config-overrides.js文件

代码语言：javascript复制

 const { override, fixBabelImports, addLessLoader } = require('customize-cra');

// import 标识按需引入
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd', // 按需引入的库
     libraryDirectory: 'es', // 模块化规范
     style: true, // 这里改成true
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true, // 允许js修改antd底层文件
            modifyVars: { '@primary-color': '#1DA57A' },             
        }
       
    }),
   }),

 );

javascript npm java babel.js

0 人点赞