在 Vue 3 中全局引入 Less 文件（如变量、混合宏等）

在 Vue 3 中全局引入 Less 文件（如变量、混合宏等），可以通过配置 vue.config.js 实现。以下是详细步骤：

---

步骤 1：安装依赖

确保已安装 less 和 less-loader：

npm install less less-loader --save-dev
# 或
yarn add less less-loader -D

---

步骤 2：创建全局 Less 文件

在项目中创建一个全局 Less 文件（例如 src/styles/global.less），定义变量、混合宏等：

// src/styles/global.less
@primary-color: #42b983;
@text-color: #2c3e50;

// 混合宏示例
.box-shadow(@x: 0, @y: 0, @blur: 4px, @color: rgba(0, 0, 0, 0.1)) {
  box-shadow: @x @y @blur @color;
}

---

步骤 3：配置 vue.config.js

在项目根目录下创建或修改 vue.config.js，添加以下配置：

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        // 全局注入 Less 文件
        additionalData: `
          @import "@/styles/global.less";
        `,
      },
    },
  },
});

• @/ 是 Vue CLI 默认的路径别名，指向 src 目录。
• 如果有多文件导入，用分号分隔：

  additionalData: `
    @import "@/styles/variables.less";
    @import "@/styles/mixins.less";
  `,
  

---

步骤 4：在组件中使用全局变量

直接在组件的 <style lang="less"> 中使用全局变量或混合宏，无需手动导入：

<template>
  <div class="example">Hello Vue 3</div>
</template>

<style lang="less">
.example {
  color: @text-color;
  .box-shadow(); // 使用全局混合宏
}
</style>

---

常见问题排查

1. 配置未生效：确保修改 vue.config.js 后重启开发服务器。
2. 路径错误：检查 @/styles/global.less 路径是否正确。
3. Vite 项目：如果使用 Vite，需在 vite.config.js 中配置：

   // vite.config.js
   export default defineConfig({
     css: {
       preprocessorOptions: {
         less: {
           additionalData: `@import "@/styles/global.less";`,
         },
       },
     },
   });
   

---

通过以上步骤，即可在 Vue 3 项目中全局引入 Less 变量和混合宏，实现样式复用。