登录
首页 >  文章 >  前端

Vite零配置用Less写CSS,插件安装与自动注入指南

时间:2026-05-23 22:12:26 143浏览 收藏

Vite虽宣称“零配置”支持Less,但实际开发中仅安装less包远远不够——必须通过additionalData自动注入全局mixin和变量文件,或用modifyVars定制第三方库主题色,二者用途分明、不可混用;尤其要注意路径必须用反引号包裹并以分号结尾、@别名依赖resolve.alias配置、修改配置后需重启服务,还要警惕math模式默认关闭、JavaScript表达式需手动启用等隐藏陷阱,稍有疏忽就会触发编译报错或样式失效。

Vite项目中如何零配置使用Less编写CSS_插件安装与自动化注入

不需要安装 less-loader,Vite 原生支持 Less,但“零配置”仅限基础编译;真正用起来必须配 additionalDatamodifyVars,否则全局变量、mixin 无法复用。

为什么 less-loader 是冗余依赖

Vite 内部已集成 less 编译能力(基于 less v4+),只要项目里装了 less 包,