必须加在projects→[项目名]→architect→build→options→styles数组中，路径相对于angular.json所在目录，顺序决定css层叠优先级，错误位置（如serve或根级）会导致ng build后样式丢失。

必须加在 angular.json 的 build.options.styles 数组里，加错位置（比如塞进 serve 或根级）会导致 ng build 后样式彻底丢失。

styles 数组到底该加在哪一级配置里

路径是：projects → [你的项目名] → architect → build → options → styles。这个数组只在构建流程中被读取，开发服务器（ng serve）和测试（ng test）也都复用它——改这里才真正全局生效。

• 常见错误：把路径写在 architect.serve.options.styles 里，本地能看，但 ng build --prod 后样式全没了
• 别写在 projects 根下、也别写在 cli 或 version 那层——JSON 解析会直接忽略
• 如果项目启用了多环境（如 production、staging），styles 应放在 options 下，而非某个 configurations 内，除非你明确要按环境差异化引入

路径怎么写才不会 404

所有路径都相对于 angular.json 所在目录（即项目根目录），不是 src/，也不是组件所在目录。

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

• 正确示例："node_modules/bootstrap-icons/font/bootstrap-icons.css"、"src/assets/styles/reset.scss"
• 错误示例："assets/styles/reset.scss"（缺 src/）、"~/styles/reset.css"（不支持别名）、"/src/styles.css"（绝对路径不识别）
• 注意斜杠方向：Windows 下也统一用 /，不要用 \，否则 CLI 构建时可能报错

顺序为什么影响最终效果

styles 数组的顺序 = CSS 层叠优先级顺序。靠前的规则会被靠后的同名规则覆盖，这点和 HTML 中 <link> 加载顺序完全一致。

• 推荐顺序：重置类（如 minireset.css）→ 框架类（如 bootstrap.css 或 @angular/material 主题）→ 项目自定义 styles.css
• 如果发现某组件里按钮颜色没变，先检查浏览器开发者工具的 Computed 面板，看是哪条规则赢了；大概率是自定义样式写在了框架样式前面，被后者覆盖了
• Angular 默认开启 ViewEncapsulation.Emulated，所以组件内样式不会被全局样式意外污染，但也不意味着全局样式“无效”——它只是没匹配到目标元素，或被更具体的选择器压过了

SCSS/Less 文件需要额外配置吗

CLI 默认支持 .css、.scss、.sass；.less 需手动装 loader 并配 stylePreprocessorOptions，否则构建直接报错。

• 对 .scss：只要文件路径正确、Sass 语法合法，无需额外操作
• 想在组件里 @import "variables" 而不写一长串 ../../../？在同级 options 下加 "stylePreprocessorOptions": { "includePaths": ["src/stylings"] }
• 多个同名文件（如两个 _variables.scss）？includePaths 是数组，按顺序查找，第一个命中即停——路径顺序决定优先级

最容易被忽略的是：改完 angular.json 后，ng serve 不会自动重启监听，得手动 Ctrl+C 再 ng serve；否则你以为改了，其实还是旧缓存。

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