在React和Vue这类前端框架项目中，引入CSS样式是构建页面视觉效果的基础操作，常见的引入方式包括直接使用import语法加载，以及通过style-loader配合webpack完成样式处理，两种方式适配不同的项目构建场景，下面分别介绍具体的实现方法。
React项目中引入CSS的方法
使用import直接引入CSS
在通过create-react-app脚手架搭建的React项目中，默认已经配置了CSS文件的加载规则，不需要额外安装style-loader等依赖，可以直接在组件文件中使用import语法引入CSS文件。
首先创建对应的CSS文件，比如定义一个组件样式文件App.css，内容如下：
/* App.css 样式内容 */
.app_container {
width: 100%;
padding: 20px;
background-color: #f5f5f5;
}
.app_title {
font-size: 24px;
color: #333;
text-align: center;
}
然后在React组件文件中直接引入该CSS文件即可，引入后样式会自动应用到对应类名上：
// App.jsx 组件文件
import React from 'react';
// 直接引入CSS文件
import './App.css';
function App() {
return (
<div className="app_container">
<h1 className="app_title">React项目CSS引入示例</h1>
</div>
);
}
export default App;
自定义webpack配置使用style-loader
如果是手动搭建的React项目，没有使用脚手架默认配置，就需要手动安装并配置style-loader和css-loader来处理CSS文件。首先安装依赖：
npm install style-loader css-loader --save-dev
然后在webpack配置文件中添加CSS文件的匹配规则：
// webpack.config.js 配置文件
module.exports = {
module: {
rules: [
{
// 匹配所有.css结尾的文件
test: /.css$/,
// 使用style-loader和css-loader处理
// 执行顺序从右到左，先执行css-loader再执行style-loader
use: ['style-loader', 'css-loader']
}
]
}
};
配置完成后，就可以和脚手架项目一样使用import语法引入CSS文件，style-loader会自动将CSS内容插入到页面的<style>标签中。
Vue项目中引入CSS的方法
使用import直接引入CSS
在Vue项目中，无论是Vue2还是Vue3，都可以在组件的<script>标签或者入口文件中使用import引入CSS。如果是单文件组件，也可以直接在<style>标签中通过@import引入外部CSS。
首先在入口文件或者组件文件中直接引入CSS：
// main.js 入口文件
import Vue from 'vue';
import App from './App.vue';
// 直接引入全局CSS文件
import './assets/global.css';
new Vue({
render: h => h(App)
}).$mount('#app');
也可以在单文件组件的<style>标签中使用@import引入：
<template>
<div class="vue_demo">
<p>Vue项目CSS引入示例</p>
</div>
</template>
<script>
export default {
name: 'DemoComponent'
};
</script>
<style>
/* 在style标签中引入外部CSS */
@import './demo.css';
.vue_demo {
margin: 20px;
}
</style>
配置style-loader处理CSS
Vue项目默认通过vue-loader已经处理了CSS文件，如果需要自定义配置style-loader，需要修改webpack相关配置。首先安装依赖：
npm install style-loader css-loader --save-dev
如果是Vue CLI搭建的项目，需要在vue.config.js中修改webpack配置：
// vue.config.js 配置文件
module.exports = {
chainWebpack: config => {
// 修改CSS相关的loader配置
config.module
.rule('css')
.test(/.css$/)
.use('style-loader')
.loader('style-loader')
.before('css-loader');
}
};
配置完成后，import引入的CSS文件会经过style-loader处理，动态插入到页面中。
两种引入方式的注意事项
- 使用import引入CSS时，样式的作用域默认是全局的，如果需要避免样式污染，React可以搭配CSS Modules使用，Vue可以在<style>标签上添加scoped属性。
- style-loader的作用是将CSS以<style>标签的形式插入到页面头部，如果项目需要提取CSS为单独文件，应该使用mini-css-extract-plugin而不是style-loader。
- 在React和Vue项目中，如果引入的是第三方库的CSS，直接使用import引入即可，不需要额外配置loader，只要项目本身已经支持CSS文件加载。
常见问题排查
如果遇到CSS引入后不生效的问题，可以先检查以下几点：
1. 检查import的路径是否正确，相对路径是否匹配文件实际位置；
2. 检查webpack配置中是否正确添加了CSS文件的loader规则；
3. 检查样式类名是否和组件中的类名一致，注意React使用className而不是class。
通过以上方法，就可以在React和Vue项目中正确通过import或者style-loader完成CSS样式的引入，满足不同场景下的样式开发需求。
CSSReactVueimportstyle_loader修改时间：2026-06-21 14:03:37