针对Webpack加载样式文件的坑

最新推荐文章于 2024-05-15 01:49:59 发布

惜__缘

最新推荐文章于 2024-05-15 01:49:59 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：实例练习学习笔记

本文链接：https://blog.youkuaiyun.com/liudan123012/article/details/87933649

学习笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

实例练习

5 篇文章

订阅专栏

本文详细介绍了如何解决Webpack中CSS加载器的配置问题，包括安装必要的依赖、正确配置Babel和PostCSS，以及调整loader选项以适配高版本Webpack。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.css代码：

body{ background: #ccc; }

app.js代码：

import './main.css';

webpack_config.js代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:['style-loader','css-loader']
			}
		]
	// },
	// devServer:{
	// 	open:true, //自动打开浏览器
	// 	port:8081 //更换端口
	}
}

运行代码：

npm run dev

结果出现报错：

ERROR in ./node_modules/css-loader/dist/runtime/api.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/preset-env" relative to directory "D:\\progr                                                                                                                           am\\webpack\\proj1\\node_modules\\css-loader"
......

通过各方面资料查询后得知，需要安装"@babel/preset-env"，得出结论：

1、第一步运行代码：

npm i -D babel-preset-env

2、webpack_config.js代码更改：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:[{
					loader:'style-loader',
					options:{
							presets:['@babel/preset-env']
						}
					},{
					loader:'css-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}
		]
	// },
	// devServer:{
	// 	open:true, //自动打开浏览器
	// 	port:8081 //更换端口
	}
}

运行代码后发现仍然报错：

去掉loader:'babel-loader'代码段中的options:{presets:['@babel/preset-env']}}这段代码，见代码：

{
				test:/\.css$/,
				use:[{
					loader:'style-loader'
					},{
					loader:'css-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}

再次运行代码发现，报了一个新的错误：

再次通过搜索各种网站资料发现，问题所在：我安装的Webpack版本是4.29.5的最新版，css-loader版本是2.1.0 ，是因为版本的问题，1.0.0以后的版本minimize这个属性已经被取消了。因此需要安装postcss-loader。安装好后，更新webpack_config.js代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:[{
					loader:'style-loader'
					},{
					loader:'postcss-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}
		]
	// },
	// devServer:{
	// 	open:true, //自动打开浏览器
	// 	port:8081 //更换端口
	}
}

再次运行代码，你会发现问题解决了……

效果：