版权声明:本文为博主原创文章,未经博主允许不得转载。 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
}