vite vue3 配置全局less

引入less的2个插件不说。

vite.config.js配置如下：

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/assets/css/public.less";`
      },
    },
  },
})

在上面的路径建立一个公共的less文件：

@oneColor:#67c23a;
@twoColor:#666;
@threeColor:#409eff;
@fourColor:#00b19c;
@fiveColor:#e6a23c;
@sixColor:#f56c6c;

在项目任何位置就可以使用了。

.chart-color1 {
    background-color: @oneColor;
    height: 70px;
}
.chart-color2 {
    background-color: @twoColor;
    height: 140px;
}
.chart-color3 {
    background-color: @threeColor;
    height: 210px;
}
.chart-color4 {
    background-color: @fourColor;
    height: 280px;
}
.chart-color5 {
    background-color: @fiveColor;
    height: 350px;
}
.chart-color6 {
    background-color: @sixColor;
    height: 420px;
}