要正确打包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>标签中。

安装必要的依赖

在项目根目录下运行以下命令，安装Webpack和相关loader：

npm install --save-dev webpack webpack-cli css-loader style-loader

如果你还打算处理图片或字体等资源，可以额外安装file-loader：

npm install --save-dev 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/' } } ] } };

说明：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• test: /\.css$/ 匹配所有以.css结尾的文件
• use数组顺序很重要：Webpack从右向左执行loader，所以必须先css-loader再style-loader
• file-loader会将引用的静态资源复制到输出目录，并返回最终的路径

编写CSS与JS代码

在src/style.css中写入样式：

body { background: url('./assets/bg.jpg'); font-family: Arial, sans-serif; } h1 { color: blue; }

在src/index.js中引入CSS：

import './style.css'; document.write('<h1>Hello Webpack</h1>');

构建与查看效果

在package.json中添加脚本：

"scripts": { "build": "webpack --mode development" }

运行构建：

npm run build

生成的bundle.js会包含CSS逻辑，浏览器加载后自动将样式插入页面头部。打开dist目录下的HTML文件即可看到蓝色标题和背景图生效。

基本上就这些。只要loader顺序正确、依赖安装完整，CSS就能顺利打包进项目。不复杂但容易忽略细节。