不能在CSS文件中用@import，因其是运行时串行加载，阻塞解析且无法被构建工具识别，导致样式重复、顺序错乱；应改用预处理器编译期@import或PostCSS插件。
CSS 样式引入在复杂项目里，核心不是“怎么引”，而是“谁负责引、何时引、引完怎么不打架”——直接用 @import 或零散 <link> 一定会失控。
为什么不能在 CSS 文件里用 @import 拆模块
它不是语法错误，而是加载时序和构建链路的硬伤：浏览器解析到 @import 才发起新请求，阻塞后续 CSS 解析，且无法被 Webpack/Vite 的 CSS 提取插件（如 mini-css-extract-plugin）识别为依赖，导致样式重复、顺序错乱、热更新失效。
- 预处理器（Sass/Less）的
@import或@use是编译期行为，最终输出单个 CSS 文件，安全可用 - 原生 CSS 的
@import是运行时行为，等同于在<style></style>里写@import url("...")，现代项目中应禁用 - PostCSS 插件（如
postcss-import）可模拟预处理器的@import，但必须显式启用，且仅作用于构建阶段
如何设计基础库与业务组件的样式目录结构
目录结构要反映“谁改谁负责”，而不是“按技术分层”。比如一个搜索框组件，它的样式文件就该和它的 JS/TS 文件放一起，而不是塞进 /styles/components/。
- 基础库样式放在
/styles/base/：含_reset.css、_variables.css（CSS 自定义属性）、_mixins.css（伪类/媒体查询封装） - 业务组件样式路径与源码对齐：
/components/search-bar/SearchBar.module.css或/widgets/search-bar/index.scss - 页面级样式用
/pages/home/Home.module.css，禁止全局污染，只作用于当前页面 DOM 范围 - 主题切换走 CSS 自定义属性 + JS 控制：
:root { --primary-color: #007bff; }，而非多个独立 CSS 文件
构建工具中如何统一注入基础样式
靠 HTML 里手动加 <link rel="stylesheet" href="/styles/base.css"> 容易漏、难维护、无法做 tree-shaking。正确做法是在入口 JS 中导入：
立即学习“前端免费学习笔记（深入）”；
import './styles/base.css'; import './styles/themes/light.css'; import './app.tsx';
Webpack/Vite 会自动把它们打包进主 CSS Chunk；若用 CSS-in-JS（如 Emotion），则通过 CacheProvider 注入全局变量；若用 Tailwind，则靠 @layer base 和 tailwind.config.js 的 content 字段自动收集。
- 避免在多个组件里重复
import './styles/base.css'，否则可能触发多次插入<style></style>标签 - Vite 中若需按路由懒加载样式，用
import('/styles/pages/dashboard.css')，但注意返回的是 Promise，需配合onLoad处理加载状态 - 使用
additionalData（sass-loader）或stylusOptions（stylus-loader）自动注入变量，省去每个文件写@use
动态主题/暗色模式下样式如何安全切换
不要靠切换 <link href="theme-dark.css">，而应让所有主题变量收敛到 CSS 自定义属性，JS 只负责切换 document.documentElement.setAttribute('data-theme', 'dark')。
- 基础样式中定义：
:root { --bg-color: #fff; --text-color: #333; }，[data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #eee; } - 组件样式直接用
background: var(--bg-color)，无需条件判断 - 若真要分离主题包（如白标客户），用构建时变量替换（
process.env.THEME）+ 条件编译，而非运行时加载 - 注意：CSS 自定义属性不支持 IE，若需兼容，得 fallback 到预处理器变量 + 构建多版本
最常被忽略的一点：样式隔离不是靠目录名实现的，是靠作用域机制（CSS Modules、Shadow DOM、scoped style）和构建时依赖图控制的。目录只是人看的，工具链才真正决定样式是否污染、能否复用、会不会重复打包。
