@import 不是模块化导入方案，它只是 css2.1 的样式表串联语法，不声明依赖、不参与构建、无作用域隔离，加载串行且阻塞首屏，无法被现代构建工具识别，故应避免使用。
@import 不是模块化导入方案，它只是 CSS2.1 的样式表串联语法，且在现代工程中应被明确避免。
为什么 @import 不能当“模块导入”用
你写的 @import url("common.css") 看似像 JS 的 import，但本质完全不同：它不声明依赖关系、不参与构建、不提供作用域隔离。浏览器把它当作“当前样式表里的一条指令”，必须等宿主样式（比如 <style></style> 标签）解析完才发起请求，加载完全串行。
- 页面 HTML 解析完成前，
@import的 CSS 一个字节都不会下载 - 嵌套
@import（A.css → B.css → C.css）会形成阻塞链，首屏渲染延迟明显 - Webpack/Vite 等工具无法识别
@import中的路径，导致 HMR 失效、Tree Shaking 失败、样式重复打包 - 导出的类名仍是全局的，
.button写十次还是同一个.button，毫无模块性可言
@import 和 <link rel="stylesheet"> 的关键区别
二者都能把外部 CSS 拉进来，但时机、可控性和语义天差地别：
-
<link>是 HTML 级别资源声明，浏览器在解析 HTML 时就并行发起请求，和 JS、图片一样走预加载队列 -
@import是 CSS 级别指令，只能出现在<style></style>或另一个 CSS 文件内部，且必须等上层样式表开始解析后才触发 -
<link>可通过media、onload、disabled动态控制；@import一旦写死就无法用 JS 干预 -
<link>在 DevTools Network 面板里显示为“early”，@import显示为“late”，时间戳差几百毫秒很常见
CSS Modules 才是真正的模块化引入方式
所谓“模块化”，核心是作用域隔离 + 构建时可控。CSS Modules 正是靠构建工具实现这点，而不是靠 CSS 语法本身：
- 文件名必须带
.module.css后缀（如Button.module.css），否则构建工具不启用模块逻辑 - JS 中用
import styles from './Button.module.css'，得到的是对象：{ button: "_button_1a2b3" }，不是原始类名 - Vue 单文件组件中
<style scoped></style>和 CSS Modules 是两套机制，混用会导致类名哈希错乱或丢失绑定 - Vite 原生支持，无需配置；Webpack 需
css-loader开启modules: { mode: 'local' }
真正容易被忽略的点：模块化不是写法问题，而是构建链路问题。@import 写得再整齐，只要没进构建流程，就只是裸 CSS 串联——它解决不了命名冲突，也扛不住协作规模。模块化的起点，永远是文件命名约定 + 构建工具识别，而不是某条 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
