vue配置全局less變量

一、使用vite開發時的配置

配置  vue.config.js

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
  server: {
    port: 8080,
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "./src/assets/css/variables.less";' +
            '@import "./src/assets/css/mixins.less";'
      }
    }
  }
})

二、使用vue-cli開發時的配置 

參考網站：https://blog.csdn.net/weixin_33483304/article/details/112030147

需要安裝兩個包開發依賴的包：style-resources-loader，vue-cli-plugin-style-resources-loader

yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D

配置  vue.config.js

const path = require('path');
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, "./src/assets/css/variables.less")
      ]
    }
  }
}