vue 引用全局样式

1.下载插件

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

2.创建全局样式文件

@blue: #18a0fb;

3.根目录 创建 vue.config.js 文件

const path = require('path');
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    // 组件中使用less变量
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 路径
        path.resolve(__dirname, './src/assets/theme/common.less'),
      ],
    },
  }
})

4.main.js 文件导入

import '@/assets/theme/common.less'

5.使用

<template>
    <span class="txtColor">{{ msg }}</span>
</template>

<style lang="less" scoped>
.txtColor{
  color: @blue;
}
</style>