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