Vue 3 + Vite环境下SCSS/LESS配置避坑指南（2023最新版）

Vue 3 + Vite环境下SCSS/LESS配置避坑指南（2023最新版）

现代前端开发中，CSS预处理器已成为提升开发效率的标配工具。在Vue 3生态中，Vite凭借其极速的构建体验，正逐步取代传统构建工具成为主流选择。然而，当SCSS/LESS遇上Vite，版本迭代带来的配置变化、路径解析的玄学问题、插件兼容性的隐形陷阱，常常让开发者陷入反复调试的泥潭。

本文将聚焦Vite 4.x与Vue 3.3的最新组合，直击实际开发中那些官方文档未曾明说的细节问题。不同于基础配置教程，这里呈现的是从数十个真实项目中提炼出的典型问题场景及其解决方案。

1. 依赖安装的版本博弈

2023年的前端生态圈，版本兼容性成为头号杀手。安装sass时，你是否遇到过这样的警告？

npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

这是因为Vite 4.x默认使用的sass版本与部分插件存在隐性冲突。推荐使用以下组合：

npm install sass@1.63.6 @vitejs/plugin-sass@3.1.0 -D

对于LESS用户，则需要特别注意vite-plugin-less的版本选择：

实际项目中发现，当同时配置SCSS和LESS时，建议锁定vite-plugin-less@3.0.1以避免解析冲突。

2. 路径解析的现代解决方案

传统@/别名在SCSS/LESS文件中经常失效，这是Vite有意为之的设计——CSS预处理器的解析路径与JavaScript处于不同上下文。最新实践推荐两种方案：

方案一：显式定义CSS路径别名