组件内直接写最简单，但需注意作用域隔离：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 把类名自动哈希化，确保样式只作用于当前组件，且不会被覆盖。启用方式取决于构建工具：
凡诺企业网站管理系统商业版 1.5 试用版
下载
系统优势： 全DIV+CSS模板，多浏览器适应，完美兼容IE6-IE8，以及Firefox Opera 等符合标准的浏览器，模板样式集中在一个CSS文件中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。 调试环境必须为IIS 后台账户密码：admin功能介绍：基本信息设置：网站名称，联系人等信息
- Webpack：配置
css-loader的modules: true - Vite：默认支持
.module.css后缀，文件名必须含module - 使用时需解构导入：
import styles from './Button.module.css'; function Button() { return ; } - 注意：CSS Modules 不支持全局选择器（如
body、html），也不支持@import嵌套中的局部化，导入的仍是全局规则
动态加载 CSS（如 import('./xxx.css')）要小心副作用
用动态 import() 加载 CSS，在按需加载场景（如弹窗组件）中看似合理，但实际有隐患：
- CSS 是无状态资源，多次
import('./foo.css')可能重复插入标签，造成样式叠加或冲突 - 没有标准卸载机制 —— 即使组件销毁，CSS 仍留在 DOM 中，可能影响后续同名类表现
- 真正需要“按需样式”的场景，建议用 CSS-in-JS 库（如
linaria静态提取，或vanilla-extract编译时生成）替代运行时 import
