要使用Webpack打包CSS，需安装css-loader和style-loader，配置时注意loader执行顺序为style-loader在前、css-loader在后，通过import引入CSS文件可将其注入页面style标签；若需提取为独立文件，应使用mini-css-extract-plugin插件并正确配置输出路径。
在使用 Webpack 打包项目时，引入 CSS 样式需要借助相应的 loader 来处理。以下是完整的流程和配置方式，帮助你正确地用 CSS 结合 Webpack 打包引入样式。
安装必要的 Loader
Webpack 本身只能处理 JavaScript 模块，要处理 CSS 文件，需要安装两个核心的 loader：
- css-loader：解析 CSS 文件中的 import 和 url() 等语法。
- style-loader：将解析后的 CSS 插入到页面的
执行以下命令安装：
npm install --save-dev css-loader style-loader配置 webpack.config.js
在 webpack 配置文件中添加 module rules，让 Webpack 能识别 .css 文件并用对应的 loader 处理。
立即学习“前端免费学习笔记（深入）”；
示例配置：
module.exports = {module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
注意 loader 的顺序：style-loader 在前，css-loader 在后，因为 Webpack 的 loader 是从右向左执行的。
在 JS 文件中引入 CSS
配置完成后，可以在 JavaScript 文件中直接 import CSS 文件。
import './styles/main.css';打包后，CSS 内容会被自动注入到页面的
中，以
