要正确打包css需使用css-loader和style-loader：前者解析css语法，后者将样式注入dom。安装webpack、css-loader、style-loader及file-loader后，在webpack.config.js中配置module.rules，确保test匹配.css文件且use顺序为['style-loader', 'css-loader']，file-loader处理静态资源并输出至assets目录。在src/index.js中导入css文件，运行npm run build生成bundle.js，页面加载时样式自动生效，关键在于loader顺序与完整依赖。
要在Webpack中正确打包并引入CSS文件，需要使用css-loader和style-loader。这两个loader分工明确：css-loader负责解析CSS文件中的@import和url()等语法，而style-loader则负责将CSS内容注入到页面的<style></style>标签中。
安装必要的依赖
在项目根目录下运行以下命令，安装Webpack和相关loader：
npm install --save-dev webpack webpack-cli css-loader style-loader如果你还打算处理图片或字体等资源，可以额外安装file-loader：
配置webpack.config.js
在项目根目录创建webpack.config.js文件，并添加如下配置：
立即学习“前端免费学习笔记（深入）”；
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', // 将CSS插入到DOM中 'css-loader' // 解析CSS文件 ] }, { test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf)$/, loader: 'file-loader', options: { outputPath: 'assets/' } } ] } };说明：
- test: /\.css$/ 匹配所有以.css结尾的文件
-
use数组顺序很重要：Webpack从右向左执行loader，所以必须先
css-loader再style-loader -
file-loader会将引用的静态资源复制到输出目录，并返回最终的路径
编写CSS与JS代码
在src/style.css中写入样式：
在src/index.js中引入CSS：
Hello Webpack
');构建与查看效果
在package.json中添加脚本：
运行构建：
npm run build生成的bundle.js会包含CSS逻辑，浏览器加载后自动将样式插入页面头部。打开dist目录下的HTML文件即可看到蓝色标题和背景图生效。
基本上就这些。只要loader顺序正确、依赖安装完整，CSS就能顺利打包进项目。不复杂但容易忽略细节。
