css如何在Vue或React项目中引入样式

内联样式通过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 文件中引入

React 示例：

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 属性指定语言

Vue 示例：

<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，全局样式可用普通引入，复杂逻辑可结合预处理器。