要正确打包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：
在项目根目录创建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/' } } ] } };说明：
css-loader再style-loader
file-loader会将引用的静态资源复制到输出目录，并返回最终的路径在src/style.css中写入样式：
在src/index.js中引入CSS：
在package.json中添加脚本：
运行构建：
npm run build生成的bundle.js会包含CSS逻辑，浏览器加载后自动将样式插入页面头部。打开dist目录下的HTML文件即可看到蓝色标题和背景图生效。
基本上就这些。只要loader顺序正确、依赖安装完整，CSS就能顺利打包进项目。不复杂但容易忽略细节。
以上就是如何使用Webpack打包引入CSS_file-loader与style-loader实践的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
843
收藏
