angular.json中styles数组必须使用真实.less后缀路径（如"src/styles.less"），否则CLI无法识别编译；需同步配置schematics的styleext为"less"以生成.less组件文件，并将变量/混入统一定义在入口styles.less中供全局复用。
angular.json里styles数组必须用.less后缀路径
加进styles数组的Less文件，路径本身得是.less结尾，比如"src/styles.less"。Angular CLI构建时会自动识别并编译它，但前提是路径写对、后缀明确。如果误写成"src/styles.css"，哪怕文件实际是Less语法，也会被当成纯CSS处理——报错或静默失败，样式不生效。
常见错误：把src/styles.scss改成src/styles.less后，忘了同步改angular.json里的路径；或者保留.scss后缀却往里面写Less语法，CLI直接拒绝编译。
- 确认文件真实后缀是
.less（不是.css或.scss） -
angular.json中styles数组项必须与磁盘文件名完全一致 - CLI默认支持
.less，无需额外安装loader，但需确保全局/本地安装了less和less-loader（Angular CLI 15+通常已内置）
组件生成时默认用less需配schematics
运行ng generate component foo时，默认创建foo.component.css。想让它自动生成.less文件，必须在angular.json的schematics节点下配置：
"schematics": {
"@schematics/angular:component": {
"styleext": "less"
}
}
这个配置只影响新生成的组件，不影响已有文件。配完要重启ng serve，否则CLI缓存可能沿用旧设置。
- 配置位置必须在
projects.[project-name].schematics下，不是根级schematics - 如果项目有多个子项目（如lib），每个都要单独配
- 配完后生成的
styleUrls会是['./foo.component.less']，别手动改成.css
变量和混入要在全局less里定义才可跨组件复用
Less的@variable和.mixin()默认不具备跨文件作用域。想让所有组件的.less文件都能用@primary-color，不能只在某个组件里@import，而要把变量/混入统一抽到一个入口less文件（如src/styles.less），再通过angular.json的styles数组引入它。
组件内@import只能访问同级或相对路径下的less文件，且每次导入都重新解析——变量不会“泄露”到父作用域。真正全局共享的唯一方式，是让CLI在构建主样式表时先编译那个入口文件。
- 推荐结构：
src/styles.less里@import 'variables.less'; @import 'mixins.less'; - 组件less里可直接用
@primary-color或.flex-center()，无需再@import - 避免在
src/styles.less里写具体样式规则，只留抽象定义，保持职责清晰
Less嵌套写法容易破坏CSS选择器权重
Less支持嵌套，比如.card { .title { color: red; } }，编译后变成.card .title。这看似方便，但会无意中提高选择器权重，导致覆盖全局样式（如Bootstrap）或父组件传入的class时失败。
例如你在组件里写.btn { .icon { margin-right: 4px; } }，结果.btn .icon比第三方库的.btn-icon优先级高，反而压不住它的margin。浏览器Computed面板里一眼就能看出谁“赢了”。
- 优先用BEM式扁平命名：
.card__title、.btn-icon，而非嵌套 - 真要用嵌套，限制在1–2层，避免
.a { .b { .c { .d { ... } } } } - 组件内样式尽量用类名组合，少依赖DOM结构，否则HTML微调就崩样式
Less的变量和混入机制很实用，但真正起效的前提是它们被CLI当作全局上下文编译——这取决于angular.json里styles数组是否指向正确的入口文件，以及该文件是否在构建流程最前端被处理。路径写错、后缀不匹配、或变量没放在入口文件里，都会让这些能力失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
