JavaScript 的 import() 是动态导入语法，CSS 本身不支持 import() 或运行时逻辑；实际是 JS 封装 CSS-in-JS 模块后动态加载并注入样式，适用于主题切换等场景。
import() 是 JavaScript 的动态导入语法，不是 CSS 的特性。CSS 本身没有 import() 函数，也不支持运行时逻辑分支或条件加载。
为什么不能在 CSS 中用 import()
CSS 是声明式、静态的样式表语言，不包含执行逻辑的能力。所谓“CSS 中使用 import()”属于常见误解——实际是 JS 模块系统在起作用。真正发生动态导入的是 JS 文件（比如一个导出 CSS-in-JS 样式对象的模块），而非纯 .css 文件。
如何用 JS 的 import() 配合 CSS-in-JS 实现按需渲染
核心思路：把样式定义封装进 JS 模块，用 import() 动态加载该模块，再将返回的样式对象注入组件。适用于主题切换、权限控制样式、A/B 测试等场景。
- 必须用支持动态导入的环境（现代浏览器 + ES 模块，或 Webpack/Vite 等打包工具）
- 被
import()的模块应导出可被 CSS-in-JS 库消费的对象（如styled-components的css模板字面量，或emotion的css函数结果） - 不能直接
import('./theme-dark.css')后“生效”，除非构建工具配置了 CSS 文件的动态加载插件（如 Vite 的import.meta.glob或 Webpack 的style-loader+css-loader链式处理） - 示例逻辑：
const loadTheme = async (type) => {
if (type === 'dark') {
const { darkStyles } = await import('./styles/dark.js');
return darkStyles;
}
const { lightStyles } = await import('./styles/light.js');
return lightStyles;
};
容易踩的坑
动态导入的 CSS-in-JS 模块若含副作用（如直接调用 injectGlobal 或写入 ），可能重复执行或竞态失效。
- 避免在动态模块顶层执行全局注入；改用函数封装，按需调用
- Vite 中
import('./x.css')默认只加载资源，不会自动插入—— 需配合import('./x.css?inline')或使用import.meta.glob预构建 - 服务端渲染（SSR）下
import()不可用，必须 fallback 到静态导入或提前 resolve - Tree-shaking 可能失效：动态路径如
import(`./${theme}.js`)会让 bundler 保留所有匹配模块
真正的分支控制权始终在 JS 层，CSS-in-JS 只是样式表达的载体。别试图让 CSS 自己做判断，那是 JS 的活儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
