Vue3 引入外部 CSS 完整选型决策

Vue3 引入外部 CSS 完整选型决策

一共 4 种主流引入方式，先把每种的作用域、使用场景、优缺点理清楚，再给一套快速决策流程。

前提：scoped 的本质：给当前 style 块做组件样式隔离；不在 scoped 中的 css 都是全局样式。

四种引入方式

方式 1：<style src="./xxx.css" scoped></style>

Vue 单文件 SFC 原生语法。

• 作用域：局部，仅当前组件生效
• 特点：标签内部不能写 css，只能引入外部文件；编译器直接读取文件，热更新稳定。
  ✅适合：组件样式非常多，全部抽离外部 css，vue 不再写额外 css
  ❌不适合：还要在 vue 写少量补充样式

<!– 全部样式都在login.css，不在vue写css –>
<style src="./login.css" scoped></style>

方式 2：<style scoped> @import "./xxx.css"; </style>

CSS 原生@import语法。

• 作用域：局部，仅当前组件生效
• 特点：导入外部 css 之后，还可以在当前 style 块继续写补充 css。
  ✅适合：大部分样式抽离外部，还需要在 vue 写少量额外局部样式
  ⚠️注意：依赖构建工具 (postcss‑import) 做内容内联，vite 没问题；老旧 webpack 偶尔有热更新小问题。

<style scoped>
@import "./login.css";
/* 这里继续写本组件少量补充样式 */
.desc {
font-size:13px;
}
</style>

⚠️上面两种，外部 css 内部要修改第三方组件，同样需要写:deep()。

方式 3：<script setup> import './xxx.css' </script>

ES 模块导入 css

• 作用域：全局！整个项目所有组件全部生效，不受 scoped 控制！
  ✅适合：全局样式、重置样式、公共主题样式。
  ❌严禁：用来引入组件专属局部 css，会污染全局。

<script setup>
// 全局生效，不要拿来做组件局部样式！
import '@/assets/reset.css'
</script>

main.js 中 import 的 css，本质就是这种方式，全局生效。

方式 4：<style> @import "./xxx.css" </style>（不带 scoped）

• 作用域：全局样式
  ✅适合：少量全局 css，写在单文件组件内。
  ❌不适合组件局部样式。

<style>
@import "@/assets/global.css";
</style>

🎯快速选择决策树（直接照着选）

• ❌错误：组件私有 css，用script setup import，变成全局，产生样式污染。
• ❌错误：全局 css，写在带 scoped 的 style 里面，被隔离，全局失效。

真实项目举例

示例 1：登录页面，样式很多，少量补充写 vue 内

<style scoped>
@import "./login.css";
.login-tip {
color:#999;
}
</style>

示例 2：用户管理页面，所有 css 全部抽离，vue 不写任何 css

<style src="./user.css" scoped></style>

示例 3：全局重置样式 assets/reset.css

main.js

import '@/assets/reset.css'

补充注意点

<style src="./login.scss" scoped lang="scss"></style>

极简口诀

组件私有样式要拆分：全抽完用src；还要写点 css 就用@import；
全局公共样式：js 里面 import。

今天 14:25

方式3和方式4的优缺点是什么？

除了这四种方式，还有其他引入外部 CSS 文件的方式吗？

如何在 Vue 项目中使用方式 3 和方式 4 引入外部 CSS 文件？