通过html的link标签引入全局css，适用于通用样式；2. 在js模块中import CSS实现组件级管理；3. 使用CSS Modules避免类名冲突；4. 采用CSS-in-JS或预处理器支持复杂样式逻辑。多数项目混合使用以兼顾性能与维护性。
在单页面应用（SPA）中引入CSS样式，核心方式是通过HTML入口文件加载样式资源，结合现代前端构建工具实现模块化管理。以下是几种常见且实用的方法。
1. 直接在HTML中引入全局CSS
将CSS文件通过 link标签 引入到项目的主html文件（如 index.html）中，适用于全局通用样式，比如重置样式、基础布局等。
示例：
<link rel="stylesheet" href="styles/global.css">
这种方式简单直接，所有页面共享同一套样式，适合不需要按需加载的场景。
2. 在javaScript模块中导入CSS
现代SPA框架（如react、vue）通常使用构建工具（webpack、vite等），支持在JS或TS文件中直接导入CSS文件，实现组件级样式管理。
立即学习“前端免费学习笔记（深入）”；
示例（React中）：
import './Button.css';
这样导入后，构建工具会处理CSS并注入到页面中。适用于组件私有样式，增强模块化和可维护性。
3. 使用CSS Modules实现局部作用域
CSS Modules 能避免类名冲突，特别适合大型项目。文件命名通常为 Component.module.css，导入后以对象形式使用类名。
示例：
import styles from './Card.module.css';<div className={styles.card}>内容</div>
构建工具会自动哈希类名，确保样式仅作用于当前组件。
4. 使用CSS-in-JS或预处理器
对于更复杂的样式逻辑，可以选用 styled-components 或 emotion 等CSS-in-JS方案，直接在JS中写样式。也可以使用sass、less等预处理器，提升开发效率。
示例（styled-components）：
const Button = styled.button` background: blue; `;
基本上就这些。根据项目规模和团队习惯选择合适的方式，多数项目会混合使用全局引入和模块化导入，兼顾性能与维护性。