内联样式通过JavaScript对象设置动态样式，Vue用:style绑定；2. 单文件组件标签最常用，React可配合CSS Modules；3. 外部CSS文件通过import或@import引入；4. CSS Modules避免类名冲突，React导入模块使用className={styles.xxx}，Vue用和$style；5. 预处理器如Sass需安装loader，Vue用lang="scss"，React可直接引入.scss文件。选择依据项目需求与团队规范。
在 Vue 或 React 项目中使用 CSS，有多种方式可以引入样式，以下是常见且实用的方法。
1. 内联样式（Inline Styles）
适用于动态样式或简单样式设置。通过 JavaScript 对象传入 style 属性。
React 示例：
{`function MyComponent() {
const style = { color: 'blue', fontSize: '16px' };
return Hello;
}`}
Vue 示例（在模板中）：
Hello
注意：Vue 中需用 :style 绑定对象。
2. 单文件组件中的
这是最常用的方式，将 CSS 写在组件文件内部。
立即学习“前端免费学习笔记（深入）”；
Vue 示例：
React 中虽无单文件结构，但可搭配 CSS Modules 使用类似效果。内容
3. 外部 CSS 文件导入
创建独立的 .css 文件并在组件中导入。
- 创建 MyComponent.css
- 在组件 JS/JSX/Vue 文件中引入
import './MyComponent.css';
function MyComponent() {
return 标题;
}
Vue 示例：
4. 使用 CSS Modules（推荐用于避免类名冲突）
将 CSS 文件作为模块导入，确保局部作用域。
文件命名：MyComponent.module.css
.title {
font-size: 20px;
color: green;
}
React 中使用：
import styles from './MyComponent.module.css';
function MyComponent() {
return Hello
;
}
Vue 中启用需配置，或在
标题
5. 使用预处理器（Sass/SCSS/Less）
支持嵌套、变量等特性，提升开发效率。
- 确保安装对应 loader（如 sass-loader）
- 使用 lang 属性指定语言
React 中可直接 import .scss 文件（Create React App 已支持）：
import './App.scss';基本上就这些。选择哪种方式取决于项目需求和团队规范。局部样式推荐用 CSS Modules，全局样式可用普通引入，复杂逻辑可结合预处理器。
