@import 在模块化项目中无法按需加载，因其是同步阻塞的原生 CSS 规则，不参与 JS 模块依赖图，Webpack/Vite 默认不支持其条件加载或拆分，导致全量打包；推荐改用 JS 层动态 import CSS、CSS Modules 配合提取插件或 CSS-in-JS 方案。
在模块化项目中，CSS 无法按需加载，本质是因为传统 @import 是同步、阻塞、无条件引入的，且 Webpack/Vite 等构建工具默认不处理 CSS 中的 @import（尤其跨文件或带变量路径时），导致“看似模块化”，实则全量打包、无法拆分、无法 Tree-shaking。
为什么 @import 在模块化项目里“不按需”？
@import 是 CSS 原生规则，浏览器或构建工具看到它就会立即加载对应文件——不管当前组件是否用到、也不管环境是否需要。它没有条件判断、没有动态逻辑、不参与 JS 模块依赖图，因此：
- Webpack 中，仅当 CSS 被 JS
import './index.css'主动引入时，才会解析其内部@import，但所有被 import 的 CSS 仍会合并进主样式包，无法分离成独立 chunk - Vite 中，默认将
@import内联展开（类似预处理），最终仍打包进一个 CSS 文件，失去“按需”的物理基础 - 无法配合
dynamic import()或条件渲染做真正的运行时加载
真正支持按需的替代方案（推荐）
放弃纯 CSS @import，改用构建工具原生支持的模块化方式：
-
JS 层按需 import CSS：在组件内用
import './Button.module.css'或if (type === 'primary') import('./primary.css')—— Vite/Webpack 都能识别并生成独立 CSS chunk -
CSS Modules + 构建插件：配合
postcss-import（编译期解析@import）+css-extract插件，可将不同区块提取为异步 CSS，再由 JS 控制加载时机 - 使用 CSS-in-JS 库（如 Linaria、Vanilla Extract）：样式与组件强绑定，天然支持 code-splitting，未渲染的组件样式不会注入 DOM
如果必须用 @import，怎么尽量“模拟按需”？
仅限老项目迁移过渡阶段，需配合构建配置手动干预：
立即学习“前端免费学习笔记（深入）”；
- 把公共样式（重置、变量）用
@import放在入口 CSS；业务样式拆成多个小文件，不在 CSS 里互相 @import，改由 JS 动态 import - 在 Webpack 中启用
css-loader?modules+MiniCssExtractPlugin，并为每个业务模块单独配置entry，让每个组件的 CSS 成为独立 chunk - Vite 中可利用
import.meta.globEager配合 CSS 路径，实现“伪动态 import”：const cssModules = import.meta.globEager('./styles/*.css');if (needDark) cssModules['./styles/dark.css'];
基本上就这些。@import 本身不是为模块化设计的，硬用它实现“按需”，等于绕路修桥——不如直接换车道。
