CSS @import 不生效因浏览器同步阻塞且仅顶层有效，构建工具通常忽略它；应改用入口机制或 Sass @use 避免冗余；CSS Modules 不处理变量共享，需抽离 tokens.css；Tailwind @layer 需重启服务生效。
import规则不生效，CSS文件没按预期加载顺序合并
浏览器原生 @import 是同步阻塞的，且只在 CSS 文件顶层有效；放在 @media 内、嵌套规则里或 JS 动态插入的 @import 都会被忽略。构建工具（如 Webpack、Vite）通常根本不处理它，而是靠预处理器或打包配置接管依赖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别在生产 CSS 中依赖
@import控制加载顺序 —— 它无法解决资源并行加载、缓存失效、提取公共 chunk 等问题 - 用构建工具的入口机制代替：比如 Webpack 中把
index.css作为 entry，它 import 的其他 CSS 会随依赖图自动处理 - 如果必须保留
@import（如兼容旧系统），确保它出现在每个 CSS 文件最顶部，且路径是相对当前文件的，不是相对于 HTML - Vite 默认禁用原生
@import解析，需显式启用css.preprocessorOptions.sass等配置才支持预处理器级的@import
PostCSS 或 Sass 中的 @import 被重复展开，体积暴涨
这是常见误用：把变量/混入定义文件（如 _variables.scss）用 @import 写进多个组件样式里，结果每个组件 CSS 都包含一份副本，导致冗余代码激增。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 区分「可复用基础模块」和「具体样式实现」：前者用
@use（Sass）或@forward，后者用@import（仅限老项目迁移） - Sass 7+ 强烈推荐改用
@use "vars"替代@import "vars"—— 它默认作用域隔离，不会污染全局，且只引入一次 - PostCSS 的
postcss-import插件默认也会去重，但前提是路径完全一致（./vars.css和vars.css被视为不同文件） - 检查构建产物中是否出现重复的
color: #333或字体声明 —— 往往就是@import滥用的信号
CSS Modules 下 class 名冲突消失，但跨文件引用变量失败
CSS Modules 默认只作用于选择器，对 :root、自定义属性、@keyframes 或 @font-face 不做局部化。所以你在 A.module.css 里定义的 --primary-color，在 B.module.css 里直接用会无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局变量统一抽到单独的
tokens.css，用:root声明，并在 HTML<link>中提前加载，不走 Modules 流程 - 若必须模块内共享，可用
composes继承类名，但无法继承变量；更稳妥的是用 JS 导出 CSS 变量值（如通过getComputedStyle），再注入到其他模块 - Webpack 的
css-loader开启modules.exportLocalsConvention: "camelCase"后，JS 中能拿到类名映射，但拿不到变量 —— 别指望它解决跨文件变量传递 - 注意 Vite 的
css.modules.localsConvention默认是camelCase，和 Webpack 行为一致，但不处理变量导出
tailwind.config.js 修改后，@layer 规则未更新，旧样式残留
Tailwind 的 @layer（如 @layer components）本身不触发依赖追踪，修改 tailwind.config.js 中的 theme.extend.colors 或新增 @layer 块时，若未重启 dev server 或清除缓存，旧生成的 CSS 会继续生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次改
tailwind.config.js后强制重启开发服务器 —— Tailwind 不监听 config 文件变化 -
@layer必须写在@tailwind指令之后，否则会被忽略；典型错误是把@layer base放在@tailwind base前面 - 使用
content配置扫描模板时，确保路径包含所有用到@layer的 CSS 文件，否则对应规则根本不会被生成 - 构建产物中搜不到新定义的
.btn-primary？先看tailwind.config.js的content是否漏了该文件所在目录
真正麻烦的从来不是怎么写 @import 或 @layer，而是搞清当前工具链到底在哪个环节接管了这些语法 —— Webpack 的 css-loader、PostCSS 插件、Sass 编译器、Vite 的 CSS 预处理，它们层层覆盖，稍不注意就有一层“静默吞掉”你的意图。
