@import 是构建时静态行为，不触发懒加载；实现按需加载需 JS 动态导入，如 React.lazy 或 import('./Button.css')，并配合 MiniCssExtractPlugin 避免 FOUC 和优化缓存。
Webpack 5 中 @import 本身不触发懒加载
直接在 CSS 文件里写 @import './Button.css'，不会产生任何代码分割或异步加载行为。Webpack 把它当作静态依赖处理，最终所有被 @import 引入的样式都会被打包进同一个 CSS 文件（或 JS bundle）里 —— 和你手动 import './Button.css' 效果一致，只是解析阶段提前了。
想让 Button 样式“按需加载”，必须配合 JS 层的动态导入
CSS 的 @import 是纯构建时行为，没有运行时控制权。真正实现“用户点开弹窗才加载弹窗样式”，得靠 JS 动态触发：
-
React.lazy(() => import('./Modal.jsx'))—— 组件 JS + 内联样式（若用style-loader）或独立 CSS 文件（若配了MiniCssExtractPlugin）都会被分离成新 chunk -
defineAsyncComponent(() => import('./Card.vue'))—— Vue 场景同理，CSS 会随组件 chunk 一起产出 - 单独封装一个
loadButtonStyles()函数，内部执行import('./Button.css')，再配合await确保样式就绪后渲染 —— 这种写法能生效，但要注意：如果用的是style-loader，样式会插入<head>；如果用的是MiniCssExtractPlugin.loader，则会额外请求一个 CSS 文件
css-loader 解析 @import 的时机很早，别指望它延迟
css-loader 在模块构建阶段就把所有 @import 转成 require 依赖，此时 Webpack 还没走到“是否异步”的决策点。也就是说：
- 你在
main.css里@import 'normalize.css'→ 它变成require('normalize.css')→ 打包进主 chunk - 你在
lazy-modal.css里@import './base.css'→ 如果lazy-modal.css是通过import('./lazy-modal.css')加载的，那base.css才会跟着进异步 chunk - 但如果你把
lazy-modal.css直接import在入口文件里，那base.css就永远不会“懒”
生产环境 CSS 分离与缓存的关键点
开发时用 style-loader 没问题，但上线前必须换 MiniCssExtractPlugin.loader，否则：
立即学习“前端免费学习笔记（深入）”；
- 样式注入是 JS 执行时完成的，可能造成 FOUC（闪屏）
- JS bundle 变大，且 CSS 无法被浏览器长期缓存（它混在 JS 里）
- 即便你做了 JS 懒加载，CSS 仍可能被提前注入 —— 因为
style-loader不区分同步/异步模块，只要进了构建图，就立刻注入
真正容易被忽略的是：哪怕你把 Button.css 放进异步 chunk，如果它被多个异步组件重复引用，又没配好 splitChunks.cacheGroups，Webpack 仍可能把它抽成独立公共 chunk，导致“本想懒加载，结果首屏就下了”。
