vue3 中 配置全局的less文件

一、安装less 和 less-loader
有两种方法
1、如果你在创建项目的时候 选择了css预处理器 并且选择了less 那么项目创建成功之后 直接就按照了less 和less-loader
2、如果你在项目创建的时候没有选择css预处理器 那么就要单独安装
执行命令：

npm install less less-loader -D

二、再继续安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader

npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

三、在vue.config.ts 添加如下代码

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({  
  transpileDependencies: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/assets/styles/main.less')
      ]
    }
  }
})

./src/assets/styles/main.less  就是你全局的less 文件的路径

四、再运行项目 就可以了

npm run serve