尧图网站建设 
Vue3 引入外部 CSS 完整选型决策一共 4 种主流引入方式先把每种的作用域、使用场景、优缺点理清楚再给一套快速决策流程。前提scoped的本质给当前 style 块做组件样式隔离不在 scoped 中的 css 都是全局样式。四种引入方式方式 1style src./xxx.css scoped/styleVue 单文件 SFC 原生语法。作用域局部仅当前组件生效特点标签内部不能写 css只能引入外部文件编译器直接读取文件热更新稳定。✅适合组件样式非常多全部抽离外部 cssvue 不再写额外 css❌不适合还要在 vue 写少量补充样式!-- 全部样式都在login.css不在vue写css -- style src./login.css scoped/style方式 2style scoped import ./xxx.css; /styleCSS 原生import语法。作用域局部仅当前组件生效特点导入外部 css 之后还可以在当前 style 块继续写补充 css。✅适合大部分样式抽离外部还需要在 vue 写少量额外局部样式⚠️注意依赖构建工具 (postcss‑import) 做内容内联vite 没问题老旧 webpack 偶尔有热更新小问题。style scoped import ./login.css; /* 这里继续写本组件少量补充样式 */ .desc { font-size:13px; } /style⚠️上面两种外部 css 内部要修改第三方组件同样需要写:deep()。方式 3script setup import ./xxx.css /scriptES 模块导入 css作用域全局整个项目所有组件全部生效不受 scoped 控制✅适合全局样式、重置样式、公共主题样式。❌严禁用来引入组件专属局部 css会污染全局。script setup // 全局生效不要拿来做组件局部样式 import /assets/reset.css /scriptmain.js 中 import 的 css本质就是这种方式全局生效。方式 4style import ./xxx.css /style不带 scoped作用域全局样式✅适合少量全局 css写在单文件组件内。❌不适合组件局部样式。style import /assets/global.css; /style快速选择决策树直接照着选这个 css 是【组件私有】只给当前 vue 组件使用情况 A组件所有样式全部抽出去vue 不再写 css→ 选style src./xxx.css scoped/style情况 B大部分抽出去还要在 vue 写少量补充样式→ 选style scoped import ./xxx.css; /style这个 css 是【全局公共样式】很多页面都要用重置、主题、全局 class→ 在main.js/script setup中import /assets/xxx.css不要混用踩坑❌错误组件私有 css用script setup import变成全局产生样式污染。❌错误全局 css写在带 scoped 的 style 里面被隔离全局失效。真实项目举例示例 1登录页面样式很多少量补充写 vue 内style scoped import ./login.css; .login-tip { color:#999; } /style示例 2用户管理页面所有 css 全部抽离vue 不写任何 cssstyle src./user.css scoped/style示例 3全局重置样式 assets/reset.cssmain.jsimport /assets/reset.css补充注意点scss/less 预处理器上面两套局部引入方式同样生效增加langscssstyle src./login.scss scoped langscss/style无论方式 1 还是方式 2外部 css 文件内部依然支持:deep()用来修改 ElementPlus 组件内部 DOM。不要在同一个组件混合多种局部引入避免样式顺序混乱。极简口诀组件私有样式要拆分全抽完用src还要写点 css 就用import全局公共样式js 里面 import。今天 14:25方式3和方式4的优缺点是什么除了这四种方式还有其他引入外部 CSS 文件的方式吗如何在 Vue 项目中使用方式 3 和方式 4 引入外部 CSS 文件 Vue3 引入外部 CSS 完整选型决策
Vue3 引入外部 CSS 完整选型决策一共 4 种主流引入方式先把每种的作用域、使用场景、优缺点理清楚再给一套快速决策流程。前提scoped的本质给当前 style 块做组件样式隔离不在 scoped 中的 css 都是全局样式。四种引入方式方式 1style src./xxx.css scoped/styleVue 单文件 SFC 原生语法。作用域局部仅当前组件生效特点标签内部不能写 css只能引入外部文件编译器直接读取文件热更新稳定。✅适合组件样式非常多全部抽离外部 cssvue 不再写额外 css❌不适合还要在 vue 写少量补充样式!-- 全部样式都在login.css不在vue写css -- style src./login.css scoped/style方式 2style scoped import ./xxx.css; /styleCSS 原生import语法。作用域局部仅当前组件生效特点导入外部 css 之后还可以在当前 style 块继续写补充 css。✅适合大部分样式抽离外部还需要在 vue 写少量额外局部样式⚠️注意依赖构建工具 (postcss‑import) 做内容内联vite 没问题老旧 webpack 偶尔有热更新小问题。style scoped import ./login.css; /* 这里继续写本组件少量补充样式 */ .desc { font-size:13px; } /style⚠️上面两种外部 css 内部要修改第三方组件同样需要写:deep()。方式 3script setup import ./xxx.css /scriptES 模块导入 css作用域全局整个项目所有组件全部生效不受 scoped 控制✅适合全局样式、重置样式、公共主题样式。❌严禁用来引入组件专属局部 css会污染全局。script setup // 全局生效不要拿来做组件局部样式 import /assets/reset.css /scriptmain.js 中 import 的 css本质就是这种方式全局生效。方式 4style import ./xxx.css /style不带 scoped作用域全局样式✅适合少量全局 css写在单文件组件内。❌不适合组件局部样式。style import /assets/global.css; /style快速选择决策树直接照着选这个 css 是【组件私有】只给当前 vue 组件使用情况 A组件所有样式全部抽出去vue 不再写 css→ 选style src./xxx.css scoped/style情况 B大部分抽出去还要在 vue 写少量补充样式→ 选style scoped import ./xxx.css; /style这个 css 是【全局公共样式】很多页面都要用重置、主题、全局 class→ 在main.js/script setup中import /assets/xxx.css不要混用踩坑❌错误组件私有 css用script setup import变成全局产生样式污染。❌错误全局 css写在带 scoped 的 style 里面被隔离全局失效。真实项目举例示例 1登录页面样式很多少量补充写 vue 内style scoped import ./login.css; .login-tip { color:#999; } /style示例 2用户管理页面所有 css 全部抽离vue 不写任何 cssstyle src./user.css scoped/style示例 3全局重置样式 assets/reset.cssmain.jsimport /assets/reset.css补充注意点scss/less 预处理器上面两套局部引入方式同样生效增加langscssstyle src./login.scss scoped langscss/style无论方式 1 还是方式 2外部 css 文件内部依然支持:deep()用来修改 ElementPlus 组件内部 DOM。不要在同一个组件混合多种局部引入避免样式顺序混乱。极简口诀组件私有样式要拆分全抽完用src还要写点 css 就用import全局公共样式js 里面 import。今天 14:25方式3和方式4的优缺点是什么除了这四种方式还有其他引入外部 CSS 文件的方式吗如何在 Vue 项目中使用方式 3 和方式 4 引入外部 CSS 文件