antd 按需加载，antd定制主题，antd上传组件，在线换肤

最新推荐文章于 2025-05-30 09:00:59 发布

时光之里

最新推荐文章于 2025-05-30 09:00:59 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： babel-plugin-import antd按需加载组件样式使用 antd 定制主题使用antd 按需加载 antd上传组件

本文链接：https://blog.youkuaiyun.com/m_review/article/details/90604566

大前端专栏收录该内容

13 篇文章

订阅专栏

博客介绍了antd相关使用方法，包括按需加载组件和样式，借助babel模块化导入插件，可减少包大小；定制主题可通过less的modifyVars方式，在webpack中配置；还提及了antd上传组件及在线换肤，并给出相关学习地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }
  // 下面做保存
  // ....
};