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
}
antd上传组件
async () => {
if (value.attachment && value.attachment.file) {
const formData = new FormData();
const filedata = value.attachment && value.attachment.file;
formData.append("file", filedata.originFileObj);
formData.append("type", "file");
// 使用接口上传上去,获取到文件的url之后在进行保存工作
const fileurl = await http.post("/uploads", formData, {
"Content-Type": "multipart/form-data"
});
value.attachment = fileurl.data.url;
}
// 下面做保存
// ....
};
在线换肤
https://segmentfault.com/a/1190000018593994?utm_source=tag-newest
antd-theme-generator
https://yq.aliyun.com/articles/662349