在React或Vue项目中，通过import引入CSS文件并借助style-loader将样式注入DOM；2. style-loader与css-loader配合，解析并动态插入样式；3. 推荐使用CSS模块避免全局污染；4. Vue支持单文件组件内联样式及module属性实现作用域隔离。
在React或Vue项目中，引入CSS样式是构建用户界面的重要环节。现代前端项目通常基于Webpack等打包工具，支持通过 import 语句或 style-loader 来加载CSS文件。以下是具体的使用方式和原理说明。
1. 使用 import 引入CSS文件
在React或Vue组件中，可以直接使用ES6的 import 语法导入CSS文件。这种方式依赖于Webpack配置中的 css-loader 和 style-loader，它们会将CSS内容解析并注入到页面的 <style> 标签中。
React 示例：
import React from 'react';import './Button.css'; // 引入CSS文件
function Button() {
return <button className="btn">点击我</button>;
}
export default Button;
Vue 示例（单文件组件）：
立即学习“前端免费学习笔记（深入）”；
<template><button class="btn">点击我</button>
</template>
<script>
import './Button.css';
export default {
name: 'MyButton'
}
</script>
只要Webpack配置正确，import './Button.css' 就会触发style-loader将其插入DOM。
2. style-loader 的作用机制
style-loader 的作用是将CSS模块动态添加到页面中。它通常与 css-loader 配合使用：
- css-loader：解析CSS文件中的 @import 和 url() 等引用，支持CSS模块化。
- style-loader：将解析后的CSS代码通过JavaScript创建 <style> 标签插入到HTML的 <head> 中。
Webpack配置示例：
module: {rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
注意loader的顺序：从右到左执行，所以先用 css-loader 解析，再用 style-loader 注入。
3. CSS模块化（可选但推荐）
为避免全局样式冲突，可以启用CSS模块。只需在文件名后加 .module.css，或在Webpack中配置开启。
React中使用CSS模块：
import styles from './Button.module.css';function Button() {
return <button className={styles.btn}>点击我</button>;
}
此时类名会被自动哈希化，实现局部作用域，防止命名冲突。
4. Vue中的样式处理差异
Vue单文件组件支持在 <style> 标签中直接写CSS，也可通过 @import 或 import 引入外部文件。
<style>@import './base.css';
.btn { padding: 10px; }
</style>
如果想启用模块化，可添加 module 属性：
<style module>.btn { color: blue; }
</style>
在组件中通过 $style.btn 访问类名。
基本上就这些。import结合style-loader是现代前端项目中最常见的CSS引入方式，简单直接且与构建系统深度集成。
