Vite项目中使用Less步骤，详细使用示例

在 Vite 项目中使用 Less 非常简单，因为 Vite 内置了对 CSS 预处理器的支持。你不需要 安装额外的 Loader 或 Plugin，只需安装 less 依赖即可。

以下是详细的步骤和代码示例演示：

1. 安装 Less 依赖

在你的 Vite 项目根目录下运行以下命令：

bash 复制代码

# 使用 npm
npm install -D less

# 或使用 pnpm (推荐)
pnpm add -D less

# 或使用 yarn
yarn add -D less

⚠️ 注意：只需要安装 less，不要安装 less-loader。Vite 原生处理预处理器，less-loader 是 Webpack 生态的产物，在 Vite 中无效且可能导致冲突。

2. 基本使用示例

创建 Less 文件

less 复制代码

// src/styles/variables.less
@primary-color: #409eff;
@border-radius: 8px;
@font-size-base: 14px;

less 复制代码

// src/styles/main.less
@import './variables.less';

.app-container {
  padding: 20px;
  font-size: @font-size-base;

  .title {
    color: @primary-color;
    border-radius: @border-radius;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

在组件中引入

vue 复制代码

<!-- src/App.vue -->
<template>
  <div class="app-container">
    <h1 class="title">Hello Vite + Less</h1>
  </div>
</template>

<!-- 方式一：外部文件引入 -->
<style lang="less">
@import './styles/main.less';
</style>

<!-- 方式二：直接在 style 标签中写 Less（推荐） -->
<style lang="less" scoped>
@import './styles/variables.less';

.card {
  background: #fff;
  border-radius: @border-radius;
  padding: 16px;
  
  .card-title {
    color: @primary-color;
    font-size: @font-size-base + 2px;
  }
}
</style>

在 JS/TS 中直接导入 Less（Vite 特有）

ts 复制代码

// src/main.ts
import './styles/main.less'  // Vite 会自动编译并注入样式

3. 配置 Less 全局变量 / Mixin（无需手动 @import）

如果每个组件都要手动 @import './variables.less' 会很繁琐，可以通过 vite.config.ts 自动注入：

ts 复制代码

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        // ✅ 自动在每个 Less 文件顶部注入，无需手动 @import
        additionalData: `@import "@/styles/variables.less";`,
        
        // ✅ Less 编译器选项
        math: 'always',          // 数学运算模式
        javascriptEnabled: true, // 允许 JS 表达式（某些 UI 库需要）
        
        // ✅ 自定义函数 / 插件
        plugins: [],
      },
    },
  },
  
  // 确保 @ 别名生效
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

配置后，所有 <style lang="less"> 和 .less 文件都可以直接使用 @primary-color 等变量：

vue 复制代码

<style lang="less" scoped>
/* 无需再 @import variables.less */
.btn {
  color: @primary-color;       /* ✅ 直接可用 */
  border-radius: @border-radius;
}
</style>

4. 配合 Ant Design Vue / Element Plus 等 UI 框架

以 Ant Design Vue 为例，覆盖主题变量：

ts 复制代码

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // ⚠️ Ant Design 必须开启
        modifyVars: {
          'primary-color': '#722ed1',
          'link-color': '#722ed1',
          'border-radius-base': '4px',
        },
        // 或者用 additionalData 引入自定义主题文件
        // additionalData: `@import "@/styles/antd-theme.less";`,
      },
    },
  },
})

5. 常见问题排查

问题	原因	解决方案
`Cannot find module 'less'`	未安装 less	`pnpm add -D less`
`@import` 路径报错	别名未配置	在 `resolve.alias` 中配置 `@`
变量不生效	`additionalData` 语法错误	确保末尾有分号 `;`
数学运算不工作	Less 4.x 默认行为变更	设置 `math: 'always'`
HMR 样式不更新	Less 文件未被正确追踪	重启 dev server，检查 import 路径

📋 总结清单

复制代码

✅ npm install -D less
✅ <style lang="less"> 或 import '*.less'
✅ vite.config.ts → css.preprocessorOptions.less
❌ 不要安装 less-loader
❌ 不需要额外 Vite 插件

以上就是在 Vite 中使用 Less 的完整流程。核心要点就是：只装 **less** ，配置走 **css.preprocessorOptions**，告别 loader。