官方有详细的说明,可以看官方文档说明

我这里白话说一下:

antd react vue的配置是一样,思路就是:

因为antd的ui色调都是定义在了公用的样式配置文件:完整版可以看这里

所以你可以使用你提供的less文件覆盖antd的less文件,达到定制主题的目的。antd也是官方推荐这样做。详尽的覆盖原理还是看less的官方文档,也就是这个功能其实是less自身提供的。

改起来也很简单,如果你使用了vue-cli初始化的项目,只需要添加如下配置:

// vue.config.js
module.exports = {
  ...
  css: {
    loaderOptions: {
      less: {
        // 这里的选项会传递给 css-loader
        lessOptions: {
          modifyVars: {
          	// 这里的配置将会覆盖less的变量,进而改变主题色调。
			'primary-color': '#1DA57A',
		},
          javascriptEnabled: true,
        },
      },
    },
  },

  ...
}

以上,如果你使用的是自己的脚手架,也只是修改一下lessOptions即可,更多参考less-loader

当然,这样还不够,因为你引入antd时候可能加载的是css,并非less,所以还需要改一下babel的配置

  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true, // 看下这里不能是css ,而是true
      },
      'ant-design-vue',
    ],
]

值得注意的是,如果你没写这个配置,那么你的antd不是按需引入,所以你需要把全局引入的样式表后缀由css改为less

如果你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的,改为 ant-design-vue/dist/antd.less。

至此算是配置完成,可以重启一下尝试是否生效,如果报错了,那么可能你的项目使用的不是less预编译,需要安装相应的less-loader。

最后,可能你会感觉这样为vue.config.js添加css样式的方式太low,其实可以完全单独将其提出成一个less文件,然后在vue.config.js中引入,当然,后者需要的格式并非less格式,所以需要一个转换的插件less-vars-to-js

比如你的目录结构是下面这样:

vue.config.js
my-antd-theme.less

vue.config.js中对应的配置为:

const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './my-antd-theme.less'), 'utf8'));

module.exports = {
...
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: themeVariables,
          javascriptEnabled: true,
        },
      },
    },
  },
...
}

这样就保证了vue.config.js的干净整洁。

参考:
https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f

Logo

前往低代码交流专区

更多推荐