vue中控制less变量发生的变化

前言

    我原本想进行类似于一个主题更换的功能，但是好像不能直接去控制less变量发生变化，所以我们需要利用变量去给less赋值，接下来直接展示吧！

首先

在有less的配置环境下：

如果没有可以通过以下命令进行添加

npm install less-loader --save
npm install less --save

配置安装完成后，我们可以去vite.config.ts中配置less了，如下

export default defineConfig((mode: ConfigEnv) => {
  return { 
    css: {
      preprocessorOptions: {
        css: { charset: false },
        less: { 
          modifyVars: {
            hack: 'true; @import "@/theme/mixins";',
          },
          javascriptEnabled: true,
        },
       
      }
    },
   
  }
})

这样就配置好了，当然你也得将mixins文件导入全局，导入到mian.ts中

import './theme/mixins.less'

这样即可

接下来

我们在less文件中mixins.less操作less变量

@backGroundColor:var(--primaryColor);
@backGroundColorRgba: var(--primaryRgbaColor);
.main1 {
    background-color: @backGroundColorRgba;
}

.mian2 {
    background-color: @backGroundColor;
} 

最后

我们在想要使用这个less的vue文件中需要导入他的style，如下

<Content :style="{'--primaryColor': primaryColor,'--primaryRgbaColor':primaryRgbaColor}"/>

使用‘--primaryColor'这种形式就可以传入这个变量，利用primaryColor来控制颜色

如下

const primaryColor = '#79C547'
const primaryRgbaColor = colorToRGB(primaryColor,0.85)

colorToRGB是我写的一个16进制转换成rgba格式的一个工具函数，为了解决一些使用一个变量再去控制透明度的颜色

export const colorToRGB = (color:string, opt:number) => {
    let color1, color2, color3;
    color = '' + color;
    if (typeof color !== 'string') return;
    if (color.charAt(0) == '#') {
        color = color.substring(1);
    }
    if (color.length == 3) {
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
    }
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
        color1 = parseInt(color.substr(0, 2), 16);
        color2 = parseInt(color.substr(2, 2), 16);
        color3 = parseInt(color.substr(4, 2), 16);
        return 'rgb(' + color1 + ',' + color2 + ',' + color3 + ',' + opt + ')';
    }
};

结束

只要我们控制住primaryColor这个变量我们就可以很好的去改变全局受控的颜色了，这篇文章主要是为了起到引导作用哈~~~