JS 中 import CSS 是构建工具能力而非原生语法；仅在 Webpack/Vite/脚手架等配置好 CSS 加载器时有效，纯 HTML 环境会报错，且不可解构导入或省略扩展名。
在 JS 中用 import 导入 CSS 文件，本质是构建工具（如 Webpack、Vite、Rollup）提供的能力，不是原生 JavaScript 的语法。浏览器本身不支持直接 import './style.css'，必须经过打包器解析和处理。
哪些情况下 import CSS 才有效
只有项目已配置支持 CSS 模块加载的构建环境时，import 才能真正起作用：
- 使用 Webpack +
css-loader和style-loader，或MiniCssExtractPlugin - 使用 Vite，默认开箱即支持
import './index.css' - 使用 Next.js、Vue CLI、Create React App 等封装好的脚手架（底层已配好 loader）
- 纯 HTML + script 标签引入 JS 文件的环境，
importCSS 会直接报错
正确写法与常见错误
导入语句本身很简单，但路径和后缀必须准确：
- ✅ 正确：
import './assets/main.css';（相对路径，带扩展名） - ✅ 正确：
import '@/styles/theme-dark.css';（别名路径，需构建工具支持） - ❌ 错误：
import './main';（缺少 .css 后缀，构建工具无法识别类型） - ❌ 错误：
import 'bootstrap/dist/css/bootstrap.min.css';（未安装或未配置样式资源处理规则时会失败）
注意：CSS 导入没有默认导出或具名导出的概念，所以不能写 import { something } from './a.css'，也不能加 as 别名。
立即学习“前端免费学习笔记（深入）”；
动态导入 CSS（按需加载）
配合 import() 表达式可实现运行时条件加载，比如切换主题：
await import('./themes/light.css');-
await import('./components/Modal.module.css');（配合 CSS Modules）
这种写法要求构建工具支持动态导入解析，并且通常只在支持 ES 模块的环境中生效（如现代浏览器 + 构建输出为 ESM）。它不会立即执行样式注入，而是等模块加载完成、CSS 被 loader 处理后才生效。
不依赖构建工具的替代方案
如果项目没用打包器（例如纯前端静态页），可以用原生方式动态加载 CSS：
- 手动创建
<link>标签并插入 - 封装函数如
loadCSS('/css/print.css')，并监听onload或onerror - 避免使用
@import规则（性能差、阻塞渲染、权重低）
这种方式完全绕过 import，属于运行时 DOM 操作，兼容性更好，也更可控。
