全局css必须通过js入口import引入，因html中link标签被构建工具视为静态资源，不参与依赖分析，导致无法code splitting、易重复加载、hmr失效、ssr首屏样式缺失；ionic项目应于main.ts首行import '@/theme/global.scss'统一管理。
全局CSS必须通过 JS 入口 import，不能靠 index.html 的 <link> 引入，否则构建工具无法识别依赖、无法做 code splitting、极易重复加载。
为什么不能在 index.html 里用 <link rel="stylesheet">
构建工具（如 Webpack 或 Vite）对 HTML 中的 <link> 是“静态资源”视角，不分析内容、不参与依赖图。结果就是：global.scss 改了一行，所有页面 chunk 都得重新加载整份 CSS；更糟的是，如果同时在 JS 里 import 了同一份样式，DevTools Network 面板会明确显示它被加载两次。
Ionic 官方脚手架默认也遵循这个原则——main.ts 开头就 import '@/theme/variables.scss' 和 import '@/theme/global.scss'，而不是往 index.html 塞 link。
- 重复注入会导致 CSS 变量覆盖混乱，比如
--ion-background-color被设了两次，后加载的生效，但时机不可控 - 热更新（HMR）失效：改
global.scss后页面不刷新样式，必须手动硬刷 - SSR 或 PWA 场景下，HTML 静态 link 引入的 CSS 不会被服务端提取，首屏样式可能缺失
src/theme/global.scss 是唯一推荐的全局样式入口
这个文件是 Ionic 项目约定的全局样式主入口，所有跨页面复用的重置、变量、工具类、基础组件样式都该放这里。它会被 main.ts 显式 import，从而进入构建流程。
实际配置方式：
- 确认
main.ts头部有import '@/theme/global.scss';（不是@import，是 ES module import） - 在
global.scss中用@import语句引入子模块，例如：@import './base/reset';、@import './components/button'; - 避免在
global.scss里写页面级选择器（如page-home ion-content），那属于页面 scope，应移入对应 page 的 SCSS 文件 - 若需覆盖 Ionic 内置 CSS 变量（如
--ion-background-color），直接在:root下声明，不要套@media或嵌套
第三方 CSS（如 Normalize.css）必须单独处理
Normalize.css 不能被 @import 进 global.scss，否则加载顺序失控，button 边框、textarea 拉拽手柄等基础表现会异常。
正确做法只有两种：
- 用 npm 安装后，在
main.ts最顶部import 'normalize.css';（推荐，随 JS bundle 加载，无竞态） - 或在
index.html的最上方加<link href="node_modules/normalize.css/normalize.css" rel="stylesheet">（确保它在任何自定义 CSS 之前） - 绝对不要在
global.scss里写@import 'normalize.css';—— 它会阻塞整个 CSS 解析，且权重常被后续规则覆盖
图标字体（如 Ionicons、Bootstrap Icons）的 CSS 引入位置
图标字体 CSS 必须和字体文件路径匹配，且不能被 CSS @import 拆开。以 Ionicons 为例：
npm 安装后，应在 main.ts 中 import 'ionicons/css/ionic.bundle.css';（注意路径是 css/ionic.bundle.css，不是 core.css 或 outline.css）；字体文件会由构建工具自动解析并复制到 www/fonts/ 下。
若用自定义图标字体（如 Iconic、Bootstrap Icons）：
- 把字体文件（
.woff2,.woff）放进src/assets/fonts/ - 把配套 CSS 放进
src/theme/fonts.css，并在其中用url('./assets/fonts/xxx.woff2')声明路径（注意是相对fonts.css的路径） - 然后在
global.scss里@import './fonts';，确保字体加载时机早于图标类使用
路径错一个点、字体文件没进构建输出目录、CSS 里 url() 路径没加 ./ 前缀——这三个是最常导致图标空白的原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
