组件内直接写最简单，但需注意作用域隔离：Vue需加scoped，Svelte默认局部，React需CSS-in-JS库；@import不推荐在组件内使用，易致HMR失效和全局污染；CSS Modules通过哈希类名实现真正局部化；动态import(‘./xxx.css’)有重复注入和无法卸载风险。

组件内直接写

标签最简单，但要注意作用域

在 Vue、Svelte 或部分 React（如 Vite + CSS in JS）中，组件文件里直接写

是最常见做法。关键不是“能不能写”，而是“是否隔离”：

• 默认是全局样式，会影响整个页面 —— Vue 里必须加 scoped 属性，Svelte 默认局部，React 中需用 styled-components 或 emotion 等库封装

• 加了 scoped 后，Vue 会自动为元素添加唯一属性（如 data-v-f3f3eg9），再给 CSS 选择器追加该属性，实现伪局部化
• 注意：深度选择器（如 ::v-deep .child 或 :deep(.child)）会穿透作用域，常用于覆盖子组件样式，但容易破坏封装边界

用 @import 引入外部 CSS 文件，但不推荐在组件内部用

@import 支持在

块里引入其他 CSS 文件，比如：

但它有明显问题：

• 每次组件渲染都触发一次 @import，Webpack/Vite 不会做依赖分析，导致 HMR 失效或重复注入
• 无法享受 CSS Modules 或 scoped 的作用域控制，@import 进来的仍是全局样式
• 更稳妥的做法是统一在入口 CSS 或主布局组件中 @import，或改用 import './button.css'（JS 模块导入），由构建工具处理

CSS Modules 是 React/Vue/TSX 中真正局部化的方案

CSS Modules 把类名自动哈希化，确保样式只作用于当前组件，且不会被覆盖。启用方式取决于构建工具：

• Webpack：配置 css-loader 的 modules: true
• Vite：默认支持 .module.css 后缀，文件名必须含 module
• 使用时需解构导入：

  import styles from './Button.module.css';
  
  function Button() {
    return Click;
  }

• 注意：CSS Modules 不支持全局选择器（如 body、html），也不支持 @import 嵌套中的局部化，导入的仍是全局规则

动态加载 CSS（如 import('./xxx.css')）要小心副作用

用动态 import() 加载 CSS，在按需加载场景（如弹窗组件）中看似合理，但实际有隐患：

• CSS 是无状态资源，多次 import('./foo.css') 可能重复插入 标签，造成样式叠加或冲突
• 没有标准卸载机制 —— 即使组件销毁，CSS 仍留在 DOM 中，可能影响后续同名类表现
• 真正需要“按需样式”的场景，建议用 CSS-in-JS 库（如 linaria 静态提取，或 vanilla-extract 编译时生成）替代运行时 import

组件样式真正的难点不在“怎么引”，而在“引完之后谁管作用域、谁负责卸载、谁承担命名冲突”。很多团队踩坑都是因为把 CSS 当作纯静态资源，忽略了它在组件生命周期里的行为特征。

https://www.php.cn/faq/2034763.html