angular.json的styles数组是唯一可靠方式，必须加在projects→[项目名]→architect→build→options→styles中，路径相对于项目根目录，顺序决定层叠优先级，加错位置或路径错误会导致构建后样式丢失。

angular.json 的 styles 数组是唯一可靠方式，其他路径或写法在构建后大概率失效。

必须加在 projects → [项目名] → architect → build → options → styles

这个位置被 ng build、ng serve、ng test 共同读取。加错地方——比如塞进 serve.options.styles 或 test.options.styles——会导致本地看着正常，但 ng build --prod 后样式全空，且无任何报错。

常见错误配置：

• "serve": { "options": { "styles": ["src/styles.css"] } } → 仅开发服务器识别，构建时忽略
• "styles": [...] 直接写在 projects 根下 → JSON 解析跳过，静默失效
• "configurations": { "production": { "styles": [...] } } → 只在 --configuration=production 时生效

styles 数组里的路径必须相对于 angular.json 所在目录

不是相对于 src/，也不是相对于组件文件，而是项目根目录（即 angular.json 所在位置）。

正确写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• "src/styles.css" ✅（推荐，语义清晰）
• "node_modules/bootstrap/dist/css/bootstrap.min.css" ✅（第三方 CSS 可直接引用）
• "src/assets/styles/reset.scss" ✅

错误写法：

• "styles.css" ❌（找不到文件，除非真放在项目根）
• "./src/styles.css" ❌（CLI 不解析 . 开头的相对路径）
• "~/styles.css" ❌（不支持 TypeScript 别名）
• "\src\styles.css" ❌（Windows 下也必须用 /，不能用反斜杠）

改了 angular.json 但样式没更新？

Angular CLI 不监听 angular.json 变化，热更新不会触发重载。

• 必须手动重启 ng serve
• 浏览器可能缓存旧的 styles.css，强制刷新（Ctrl+Shift+R）或禁用缓存调试
• 检查 是否已注入对应 <style></style> 或 <link> 标签
• 如果用了 Tailwind，确认 tailwind.config.js 的 content 字段包含 src/**/*.html 和 src/**/*.ts，否则 PurgeCSS 可能误删类名

全局样式和组件样式冲突时谁赢？

顺序决定层叠优先级：styles 数组靠后的文件，其规则会覆盖前面同选择器的规则（特异性相同时）。

但要注意：

• 组件默认启用 ViewEncapsulation.Emulated，它会给组件内元素加属性选择器（如 [_ngcontent-ng-c123]），天然隔离组件样式；全局样式能影响子元素，但无法直接命中组件宿主元素，除非用 :host
• 若组件启用了 ViewEncapsulation.ShadowDom，全局样式完全不穿透
• 避免靠加载顺序“碰运气”解决冲突；更稳妥的是提升全局样式的特异性（例如加 body 前缀），或统一用 CSS 自定义属性（var(--primary-color)）控制可变部分

真正容易被忽略的是：styles 数组里每个条目都参与构建打包，哪怕只是个空文件，也会生成对应输出；顺序一旦写错，覆盖逻辑就不可控，且问题往往延迟到上线后才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！