vue + ant design vue 搭配 less 动态自定义主题颜色

今天搞了一下午，终于搞成功了 ????，分享给大家看看。首先看一下版本配置"ant-design-vue": "^1.7.4""antd-theme-generator": "^1.2.6","less": "^2.7.3","less-loader": "^6.2.0",less , less-loader和 antd-theme-generator 不能过高，会有bug1.安装插件npm i

言小溪

4385人浏览 · 2021-05-09 19:53:27

言小溪 · 2021-05-09 19:53:27 发布

今天搞了一下午，终于搞成功了 😃，分享给大家看看。

思路解析

less 提供一个 modifyVars 可以修改浏览器中 less 文件里的变量
所以我们需要在浏览器端引入 less.js
需要引入一个 less 文件，其中包含要修改的变量
但是 antdv 没有吧 less 全部封装成一个文件，如果使用 cdn 引入 antd.less 会导致 @import语句大量的引入其他的 less cdn 文件，这样会导致页面首次加载异常卡顿。
所以需要导入一个插件 antd-theme-generator ，他可以打包整个 antd.less 到一个文件里。
最后打包指定文件到静态资源目录(/public)下，在浏览器引入，然后通过 modifyVars 即可改变变量。
最后通过 less.js 新编译的 css 文件，覆盖浏览器中之前定义的 antd.css 样式

首先看一下版本配置

"ant-design-vue": "^1.7.4"

"antd-theme-generator": "^1.2.6",
"less": "^2.7.3",
"less-loader": "^6.2.0",

less , less-loader和 antd-theme-generator 不能过高，会有bug

1. 安装插件

npm i antd-theme-generator@1.2.6  less@2.7.3  less-loader@6.2.0  -D

2. 在项目的根目录，跟 `src`同级的目录创建一个文件 `color.js`

const path = require('path');
const {generateTheme} = require('antd-theme-generator');
// ant-design-vue/dist/antd.less
const options = {
    antDir: path.join(__dirname, './node_modules/ant-design-vue'), //antdv对应具体位置
    stylesDir: path.join(__dirname, './src/assets/theme'),    //less文件夹对应具体位置
    varFile: path.join(__dirname, './src/assets/theme/variables.less'), //文件夹变量对应具体位置
    themeVariables: [
        '@primary-color',
    ],
    indexFileName: './public/index.html',//首页路径
    outputFilePath: path.join(__dirname, './public/color.less'),//打包出来的文件
}
generateTheme(options)
    .then(() => {
    console.log('Theme generated successfully');
    })
    .catch(error => {
        console.log('Error', error);
    });

3. 创建 less 默认主题变量文件

在以下位置创建，也可自定义 : ./src/assets/theme/variables.less

// 引入 antdv 的 theme 默认文件
@import "~ant-design-vue/lib/style/themes/default.less";
// 定义默认变量
@primary-color: #f5222d;

~ant-design-vue/lib/style/themes/default.less 是 antdv 的 theme 默认文件，可能会报错，自己找办法导入。

4. 修改 index.html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
                Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>

        <link rel="stylesheet/less" type="text/css" href="./color.less"/>
        <script>
            window.less = {
                async: false,
                env: 'production'
            };
        </script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

    </body>
</html>

这段必须得在 app 后面加，因为项目里面需要引入其他的 antdv 的 css 样式，如果在之前加入，新的less 文件变量就会被覆盖。

        <link rel="stylesheet/less" type="text/css" href="/color.less"/>
        <script>
            window.less = {
                async: false,
                env: 'production'
            };
        </script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/less@2.7.2/dist/less.min.js"></script>

5. App.vue

不用改，只需引入默认的 antd.css 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import antdv from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false
Vue.use(antdv)


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

6. 修改 package.json 启动参数

node color 意思就是启动前先运行 color.js ，编译 color.less 文件

  "scripts": {
    "serve": "node color && vue-cli-service serve",
    "build": "node color && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

7. 启动项目，测试

npm run serve

输出

Theme generated successfully. OutputFile: E:\gi
thub\enncy\enncy-admin\public\color.less
Theme generated successfully

证明编译成功。

在这里插入图片描述
主题成功变成默认设置的红色 @primary-color: #f5222d;

修改颜色

//modifyVars 返回一个 Promise 
window?.less?.modifyVars({
    "@primary-color": 'orange',
})

在这里插入图片描述
完美 😎😎😎

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}$/, //不连续的两位字母// /^