scss命名冲突的根本原因是作用域缺失，@import仅为文本拼接，所有变量、mixin和类名均进入全局css作用域；@use可实现变量和mixin私有化，类名隔离需依赖唯一前缀或css modules哈希机制。
SCSS命名冲突的根本原因不是写法问题，是作用域缺失
SCSS本身不提供作用域隔离，@import只是文本拼接，所有$variable、@mixin、.class最终都进入全局 CSS 作用域。哪怕你写了.modal { .header { } }，编译后仍是.modal .header——它和页面里任何其他.header共享同一选择器层级，谁权重高、谁后加载，谁就赢。这不是“嵌套不够深”能解决的，而是机制层面的限制。
用@use替代@import，变量和mixin才真正私有
@use是 Sass 模块系统的基石，它让每个文件成为独立作用域：
- 必须写在文件顶部，不能嵌套在规则或
@if里 - 变量默认不可见，必须通过命名空间访问：
base.$color-primary，而非直接$color-primary - 旧项目混用
@import和@use会直接编译报错，必须全量切换 - 第三方库如 Bootstrap 5.3+ 才支持
@use，老版本仍需@import，无法享受模块隔离
类名隔离靠前缀，不是靠嵌套
Sass 嵌套本身不生成新类名，&只是语法糖。真正防止.header被覆盖，得靠人为加唯一前缀：
- 根选择器必须带项目/组件级前缀，如
.uikit-modal、.admin-form，避免my-、custom-这类泛化词 - 子元素用
&__body、&__footer生成.uikit-modal__body，确保类名强绑定 -
&必须紧贴选择器，&__header正确，& __header（中间空格）会变成全局__header，直接失效 - 伪类和媒体查询要继续用
&:hover、&@media，否则脱离前缀约束
CSS Modules 是另一条路，但依赖构建工具
如果你用 Webpack/Vite，Button.module.scss + import styles from './Button.module.scss' 能自动生成哈希类名，比如Button_button_abc12。这条路完全绕过命名约定，但有硬性前提：
- 文件名必须含
.module.后缀，否则 loader 不触发 - TypeScript 项目需补
declare module '*.module.scss'声明 - 不支持
:global()以外的全局选择器，html、body要显式包裹 - 纯 HTML + CDN 场景下不可用，只能手动前缀或 PostCSS 插件
最易被忽略的一点：动态插入的 DOM（如 Bootstrap Modal）默认挂载到document.body，会逃出你的.uikit-modal容器。必须显式传container: '.uikit-modal'，否则样式根本不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
