现在新建vue2项目会自动安装less和less-loader。再安装一个插件 sass-resources-loader

npm i sass-resources-loader --save-dev

vue.config.js中

module.exports = {
    ......
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('less').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    resources: 'xxx/xxx.less'// 全局less文件的地址
                })
                .end()
        })
    }
    ......
}

在main.js中引入全局less文件

// 引入公共css
import "xxx/xxx.less";

参考了https://www.jianshu.com/p/79ec02d96c88

在css样式文件夹中新增 global.less 作为全局样式，在 main.js 中通过 import 导入，可正常使用样式，但 global.less 中定义的样式属性还不能全局使用，需通过以下方法配置。

1、安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 两个插件

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

2、在 vue.config.js 中进行配置

使用 global.less

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

或者使用 global.scss

```javascript
module.exports = {
	css: {
		loaderOptions: {
			sass: {
				data: `@import '@/assets/css/global.scss';`
			}
		}
	}
}

前言

博主最近学习在vite项目中配置less，通过less去配置项目的全局样式，下面是配置步骤

一、安装依赖

首先项目中安装less和less-loader依赖

npm install less
npm install less-loader

二、使用步骤

1.配置vite.config.js

在vite.config.js配置less全局样式，在additionalData里配置全局样式文件路径,文件类型是less,文件位置放在静态文件目录assets下

   css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";',
      },
    },
  },

2.全局样式编写

在全局样式文件里配置主色调 （其他样式如高宽，间距可自行编写）

@color:#63C4D4;

3.组件使用

在有需要的组件内使用该全局样式

 .title{
 	color:@color;
 }

总结

这就在vite项目中配置less全局样式的步骤，如果上述内容存在问题，欢迎大家批评指正！！！