CSS快速切换引入方式技巧分享

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS开发快速切换引入方式技巧》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

最稳方式是用构建工具条件注入，如Webpack配合环境变量自动切换link与@import；不用构建工具则用注释+多光标快捷切换；注意@import性能差、兼容性低，内联style需加scope隔离，热更新应避免DOM全量替换，CSS不生效常因引入位置、语法错误或Shadow DOM作用域限制。

开发时怎么快速在 link 和 @import 之间切换

没必要手动改 HTML 或 CSS 文件来回替换。最稳的方式是用构建工具做条件注入，比如 Webpack 的 html-webpack-plugin 配合环境变量：

<%= htmlWebpackPlugin.options.cssMode === 'link' ? 
  '<link rel="stylesheet" href="main.css">' : 
  '<style>@import url("main.css");</style>' %>

如果不用构建工具，直接写 HTML 开发，建议把两种方式都写上但用注释控制开关，再配合编辑器多光标（如 VS Code 的 Ctrl+D）一键取消注释：

<!-- <link rel="stylesheet" href="main.css"> -->
<style>@import url("main.css");</style>

• @import 在 CSS 文件里写，会阻塞后续资源下载，link 是并行加载，性能差异明显
• 浏览器 DevTools 的 Network 面板里看 Initiator 列，能立刻分辨是哪个引入方式触发的请求
• 某些旧版 IE 对 @import 层级嵌套有限制（最多 4 层），link 没这问题

用