vue全局less样式

1. 前提条件
   下载资源包：less-loader、less、style-resources-loader、vue-cli-plugin-style-resources-loader

npm i less-loader less --save-dev

npm i style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

2. 定义变量

// globel.less 文件
@text-color: #f2f2f2;

3. 配置 vue.config.js
   注意全局样式文件路径

const path = require('path')
const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  pluginOptions: {
    
    
    "style-resources-loader": {
    
    
      preProcessor: "less",
      patterns: [
        // 全局变量文件的路径
        path.resolve(__dirname, './src/assets/css/globel.less'),
      ],
    },
  },
})

4. 使用变量

// vue 组件
<style lang="less" scoped >
  a {
    
    
    border: 1px @text-color solid;
}
</style>