组件级scss默认隔离，无需@import；复用样式应通过@use导入全局基础文件，变量须在angular.json中配置includepaths。
组件级 SCSS 文件默认就是隔离的，别乱加 @import
Angular 默认启用 ViewEncapsulation.Emulated，每个组件的 .component.scss 天然只作用于自身模板——h2、button 这类标签选择器会自动带上唯一属性（如 _ngcontent-ng-c123），不会污染其他组件。所以你不需要、也不该在组件 SCSS 里写 @import '../styles/base' 这种相对路径引入全局样式。路径一变就报错，且破坏编译缓存。
- 组件样式文件（如
card.component.scss）只管本组件内部结构和视觉微调 - 若真要复用通用规则（比如统一的
h2间距），应通过全局基础样式 +@use显式导入，而不是靠“默认生效” - 直接写
h2 { margin-bottom: 30px; }在组件 SCSS 里，等于把重复逻辑又埋进去了，违背 DRY
@use 是组件引入基础样式的唯一安全方式
从 Angular 14 开始，@use 是 SCSS 推荐语法，它提供命名空间隔离，避免变量/混入冲突。组件 SCSS 中必须用它导入项目级基础样式（如 _base.scss），不能用旧式 @import。
- 确保基础文件名以
_开头（如src/styles/_base.scss），否则会被单独编译成 CSS，引发重复或冲突 - 在组件 SCSS 中写：
@use 'src/styles/base' as base;，然后可用base.h2（如果定义了混入）或直接依赖其 CSS 规则（因标签选择器仍生效） - 若用
@import 'src/styles/base'，SCSS 可能多次解析同一文件，导致variable is undefined或duplicate mixin definition
全局变量必须走 angular.json 配置，不能手动 @import
组件 SCSS 里想用 $color-primary 这类变量？别在每个文件里写 @import '../styles/variables'。这种写法路径硬编码、无法跨目录移动、还可能触发重复定义错误。
- 正确做法：把变量抽到
src/styles/_variables.scss，并在angular.json的stylePreprocessorOptions.includePaths中添加["src/styles"] - 配置后，所有组件 SCSS 可直接写
@use 'variables' as vars;或（更简洁）@use 'variables';，无需路径 - 常见翻车点：
includePaths写成["./src/styles"]或["src\styles"]——只接受正斜杠、无前缀的目录路径
局部变量只用于组件内临时计算，别碰全局命名
组件 SCSS 中可以定义局部变量，但仅限本组件内一次性计算，比如响应式断点偏移、尺寸缩放系数。它们不参与复用，也不该和全局变量同名。
- 示例：
$card-padding-mobile: $card-padding-default * 0.75;，只在card.component.scss里用 - 命名建议加前缀，如
$card-title-margin，避免意外覆盖$title-margin这类全局变量 - 切忌在组件里重定义全局变量（如
$color-primary: red;），这会破坏主题一致性，且后续@use 'variables'可能报错
真正容易被忽略的是：SCSS 的 @use 和 JavaScript 的 import 完全不是一回事——它不执行运行时加载，而是在编译期合并作用域；一旦 includePaths 配错或文件名没加下划线，错误往往延迟到构建生产包时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
