首页
技术
生活
常用脚本
技术文档
关于
动态导入antd并且定制主题色
  • 作者:王树东
  • 发布于:2020-10-08 18:48:43
  • 更新于:2020-10-08 18:48:43

主要支持pc ui官网: https://ant.design 移动端的ant ui库地址:https://mobile.ant.design/docs/react/introduce antd pro :https://pro.ant.design/index-cn

使用less的方式

  • 减少打包的体积
  • ui定制

遇到的问题

20201008182839

使用方式

yarn add antd

在package.json babel选项添加

增加动态导入
yarn add babel-plugin-import
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ]
  },

webpack.conf.js

javascriptEnabled: true,

// 定制antd主题
modifyVars: {
  'primary-color': '#36cfc9',
  'link-color': '#bfbfbf',
  'border-radius-base': '2px',
},
 if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            javascriptEnabled: true,
            modifyVars: {
              'primary-color': '#36cfc9',
              'link-color': '#bfbfbf',
              'border-radius-base': '2px',
            },
          },
        }
      );
    }

定制主题

modifyVars: {
+           'primary-color': '#1DA57A',
+           'link-color': '#1DA57A',
+           'border-radius-base': '2px',
+         },

选择颜色的网址

评论

暂无评论

发表评论

王树东的博客

Copyright © 2014-2020冀ICP备12011960号-15

FLOW ME

wsd312@163.com技术咨询和服务
starkland@163.combusiness cooperation

公众号

个人微信交个朋友
欢迎关注服务号更多技术等你来看