vue 中less样式混入(mixin)或者使用别人的样式的几种用法

第一种、将xx.less文件导入main.js文件中即可，但有缺陷，比如less中定义的变量，函数，在.vue文件中访问不了例如：

// 名称为：testLess.less

div{
  width: 1000px;
  background-color: pink;
}

.minBox{
  width: 100px;
  height: 100px;
  background-color: gold;
}
// 以上两种方式可以

// 下边这两种方式这样写经验证不行
// @main:deeppink;
// 变量，函数方式导入main.js不行在其他文件中引用不了
//.minBox(){
//  width: 100px;
//  height: 100px;
//  background-color: gold;
//}

在main.js中导入

import './assets/testLess.less'

在app.vue中使用

<template>
  <div>
    <div class="test"></div>
    <div class="test1"></div>
    <div class="minBox"></div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="less">
// 会发现可以直接引用，即类名直接写上minBox即可使用，内置的div就直接加上样式了
</style>

第二种方式：在.vue的样式部分直接导入所需要的.less文件，这种方式既可以使用自定义的less方法，也可以使用less自定义的变量，还可以直接在标签上使用样式例如：

名称为: mixin.less

.minBox{
  width: 100px;
  height: 100px;
  background-color: gold;
}

.aaa(){
  width: 100px;
  height: 100px;
  background-color: pink;
}

@main:deeppink;

在app.vue中的样式中直接使用

<template>
  <div>
    <div class="test"></div>
    <div class="test1"></div>
    <!-- 直接使用导入的样式   -->
    <div class="minBox"></div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="less">
//通过直接导入这种方式可行
@import "./assets/mixin.less";
.test{
  .aaa();
}
.test1{
  .aaa();
  background-color: @main;
}
</style>

最终结果如下：

第三种也是全局可用的一种，使用的时候不用导入，直接使用即可

使用步骤1、：注意是vite.config.js的配置首先下载并安装less ,less-loader

npm install less
npm install less-loader

2、配置vite.config.js内容如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
// 就是把下边的内容复制到你的vite.config.js中，注意要修改你导入的.less的路径
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/mixin.less";',
      },
    },
  },

})

3、直接在app.vue中使用

<template>
  <div>
    <div class="test"></div>
    <div class="test1"></div>
    <div class="minBox"></div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="less">
// 直接使用即可
.test{
  .aaa();
}
.test1{
  .aaa();
  background-color: @main;
}
</style>