组件级css只能通过@component的styleurls或styles声明，模板中、ts中import均无效；angular.json仅支持全局样式配置。

组件级 CSS 只能通过 styleUrls 或 styles 显式声明，Angular 不会解析模板里的 <link>、组件 TS 文件中的 @import（除非在 SCSS 文件内），也不支持在 angular.json 中为单个组件配置。

组件样式必须写在 @Component 装饰器里

Angular 构建时只认 @Component 的 styleUrls（数组）或 styles（字符串数组）字段。其他任何地方写的路径都不会被识别或打包：

• styleUrls: ['./my-comp.component.scss'] ✅ 路径相对于该 TS 文件所在目录
• styleUrls: ['../shared/styles/button.scss'] ✅ 可跨目录，但必须是相对路径
• 在组件 TS 里写 import './theme.css' ❌ 不触发样式加载，无效果
• 在组件 HTML 模板里写 <link rel="stylesheet" href="theme.css"> ❌ 构建时忽略，运行时也无效
• 把路径塞进 angular.json 的 styles 数组 ❌ 这是全局样式，不是组件级

styleUrls 和 styles 的实际差异

两者本质不同：前者加载外部文件，后者直接写内联样式。选哪个取决于场景：

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

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

下载

• styleUrls 支持 .css/.scss/.sass/.less，适合常规开发；SCSS 文件里可以安全用 @import 或 @use 引入变量/混入
• styles 是字符串数组，适合极简场景，比如 styles: [`h1 { color: red; }`]；不能写 @import，也不能引用外部文件
• 默认 ViewEncapsulation.Emulated 下，两种方式都会自动加上属性选择器（如 h1[_ngcontent-ng-c123]），天然隔离
• 如果用了 ViewEncapsulation.ShadowDom，styles 写的规则仍生效，但 styleUrls 加载的外部 CSS 不会穿透 Shadow DOM 边界

为什么 @import 在组件 SCSS 里能用，但在 TS 里不行？

因为 @import 是 SCSS 预处理器语法，只在 SCSS 编译阶段起作用；TS 文件不经过 SCSS 编译器，所以无效：

• ✅ 正确：在 my-comp.component.scss 里写 @use 'src/styles/variables' as vars;
• ❌ 错误：在 my-comp.component.ts 里写 import 'src/styles/variables.scss';
• ⚠️ 注意：@use 或 @import 的路径也是相对该 SCSS 文件的，不是相对项目根目录；想统一路径，得配 stylePreprocessorOptions.includePaths

真正容易被忽略的是：组件级样式和 ViewEncapsulation 模式强绑定。如果你改了 encapsulation: ViewEncapsulation.None，那 styleUrls 加载的样式就变成全局污染源——它不再带属性选择器，会直接影响其他组件，调试时很难定位来源。

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