antd 按需加载，antd定制主题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/90604566

antd 按需加载组件，antd按需加载样式

使用 babel-plugin-import，babel模块化导入插件，兼容antd，antd-mobile，lodash等库

配置：{ "libraryName": "antd", style: "css" }

使用style：导入真正的css源文件，并且可以在编译期间进行优化。

style: "css"：预先捆绑的css文件按原样导入。相当于：require('antd/lib/button/style/css');

style: true：可以减少包大小。相当于：require('antd/lib/button/style');

学习地址：https://github.com/ant-design/babel-plugin-import

antd定制主题

使用 less 提供的 modifyVars 的方式进行覆盖变量

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

在webpack中定制，对 less-loader 的 options 属性进行 modifyVars 的配置。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+         // or
+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}