Ant-design-vue更换主题颜色

专业趣多多点巧克力豆

2822人浏览 · 2022-10-11 21:40:32

专业趣多多点巧克力豆 · 2022-10-11 21:40:32 发布

package.json

"antd-theme-generator": "^1.2.5",
"antd-theme-webpack-plugin": "1.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
//如果高版本的less不能实现主题颜色切换less就换成2.7.3版本的
//less这个2.7.3版本应该是版本太低有个bug，在我的项目中页面加载完后会闪一下变成白屏再重新加载

vue.config.js

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {
  antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "./src/styles"), //主题文件所在文件夹
  varFile: path.join(__dirname, "./src/styles/variables.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "./src/styles/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
  themeVariables: [
    "@primary-color",
    "@success-color"
  ], //要改变的主题变量
  indexFileName: "./public/index.html", // index.html所在位置
  outputFilePath: path.join(__dirname, "./public/color.less"), //提取的less文件输出到什么地方
  generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};
module.exports ={
    configureWebpack: {
    // webpack plugins
    plugins: [
      // 引入依赖配置
      new AntDesignThemePlugin(options)
    ],
  },
}

在src目录下创建style文件夹，文件夹中创建index.less和variables.less文件

variables.less 配置如下:

// 这段样式引入必须添加
@import "~ant-design-vue/lib/style/themes/default.less";
//动态设置默认主题变量
@primary-color: #bfa;

public目录下index.html中添加less执行程序,注意下列代码添加在body标签下

<body>
<link rel="stylesheet/less" type="text/css" href="./color.less" />
<script>
    window.less = {
      async: false,
      env: 'production',
      javascriptEnabled: true
    };
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.9.0/less.min.js"></script>
</body>
引入的less要和package.json中的less版本一致，

在页面中设置按钮更换主题

<div>
  <a-button type="primary" @click="changetheme()" style="position:absolute;right: 30%;top: 30%">
    Primary
  </a-button>
</div>
changetheme(){
window.less.modifyVars(//更换主题颜色要这么写
    {
        '@primary-color': '#e64e14',
        '@success-color': '#fafafa'
        //这个@...在node_modules\ant-design-vue\lib\style\themes\default.less应该是ant定义好的找找有没有自己能用的
        //这里写了啥@...也要在vue.config.js中themeVariables里也要写@...
    }
)
.then(() => {console.log('success')})
.catch(error => {
    console.log(error);
});
},

注意事项:

如果项目运行报错

/node_modules/ant-design-vue/lib/style/themes/default.less 文件中添加上述报错信息中的extract中的less变量

@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;

原先的./public/color.less要先可以删掉，以上步骤不出错会再新生成个color.less文件；不删的话会把原先的覆盖掉。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^