Vue SFC中不生效，主因是未安装less编译支持：Vue CLI 5+需npm install less less-loader --save-dev，Vite仅需npm install less --save-dev；还需检查配置是否禁用预处理器、@import路径是否正确、scoped下嵌套是否需:deep()穿透。
Vue SFC 中 <style></style> 标签加 lang="less" 不生效？先确认 loader 是否就位
直接加 lang="less" 没反应，大概率是项目没装 Less 编译支持。Vue CLI 5+ 默认不带 less-loader，Vite 也需手动安装依赖。不装包，<style lang="less"></style> 就只是普通文本，不会被编译。
实操建议：
- Vue CLI 项目：运行
npm install less less-loader --save-dev（注意版本匹配，CLI 5 推荐less@4+less-loader@11） - Vite 项目：运行
npm install less --save-dev（Vite 内置支持 Less，只需装less运行时） - 检查
vue.config.js（CLI）或vite.config.ts是否意外禁用了css.preprocessor配置
在 <style></style> 标签里写 Less 语法，但变量/嵌套不生效？注意作用域和编译层级
Less 的 @import、变量、嵌套等特性默认只在当前 <style lang="less"></style> 块内有效，且 Vue SFC 的每个 <style></style> 是独立编译的 —— 它们不会自动共享全局变量或 mixin。
常见问题与应对：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 想复用颜色变量？把
variables.less放到src/styles/下，然后在每个需要的地方显式@import "@/styles/variables.less"; -
&嵌套失效？确保没混用scoped和深度选择器写法冲突，比如.container { &__item { ... } }在scoped下会生成属性选择器，需配合::v-deep或:deep()（Vue 3）才能穿透作用域 - 报错
Cannot resolve 'xxx' in ...？@import路径必须以~开头（Webpack）或使用绝对路径别名（如@/styles/xxx），相对路径在 SFC 中容易解析失败
多个 <style lang="less"></style> 标签共存，CSS 优先级和覆盖逻辑怎么算？
Vue 会把所有 <style></style>（无论 lang）按顺序合并进最终 CSS，但编译时机不同：普通 CSS 直接注入，Less 则先经 less-loader 编译再注入。这意味着：
- 后写的
<style lang="less"></style>编译出的 CSS 规则，会出现在前一个<style></style>编译结果之后，自然具有更高层叠权重（前提是选择器 specificity 相同） - 如果用了
scoped，每个<style></style>会带上唯一 data 属性，彼此隔离，不存在覆盖关系；只有非scoped的 Less 块才参与全局样式竞争 - 避免靠“写在后面”来覆盖样式 —— 更可靠的方式是提升选择器 specificity，或用
:global(...)显式声明全局规则
开发时热更新失效，改了 Less 文件页面没变？检查 source map 和缓存链路
Less 修改后未触发重编译，通常不是 Vue 的问题，而是构建工具的缓存或 sourcemap 映射断裂导致的“假失效”。尤其在启用 css.sourceMap 或使用 IDE 自动保存时容易出现。
排查步骤：
- 终端看 webpack / vite 是否真收到了文件变更事件（有 “rebuilding…” 日志）
- 浏览器开发者工具中，检查
<style></style>标签内容是否已更新；若没更新，清空 node_modules/.vite（Vite）或node_modules/.cache（CLI）再试 - Less 中用了
@import但没开启 watcher 递归监听？Vite 默认支持，Webpack 需确认less-loader配置中additionalData或javascriptEnabled未干扰路径解析
真正麻烦的是跨组件共享 Less 变量时，一处修改要手动触发所有引用组件重编译 —— 这时候该考虑抽成独立的 defineOptions({ style: '...' }) 动态注入，或者干脆迁移到 CSS-in-JS 方案。
