Webpack处理样式资源

Webpack处理样式资源

如何处理Css、Less、Sass、Style样式资源

介绍

Webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源。我们找Loader都应该去官方文档中找到对应的Loader，然后使用官方文档找不到的话，可以从社区Github中搜索查询。
webpack中文文档

处理Css资源

1、下载包

npm i css-loader style-loader -D

注意需要下载两个loader

2、功能介绍

• css-loader：负责将Css文件编译成Webpack能识别的模块
• style-loader： 会动态创建一个Style标签，里面放置Webpack中Css模块内容

此时样式就会以Style标签的形式在页面上生效

3、配置

// 加载器
module：{
	rules: [
	// loader配置
		{
			test: /\.css$/, //只检测.css文件
			use: [
				// 执行顺序，从右往左（从下到上）
				"style-loader", // 将js中css通过创建style标签添加到html文件中生效
				"css-loader" // 将css资源编译成commonjs的模块到js中
			]
		}	
	]
}

处理Less资源

1、下载包

npm i less less-loader -D

2、功能介绍

• less-loader：负责将Less资源编译成Css文件

3、配置

module:{
	rules: [
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		},
		{
			test: /\.less$/,
			// loader和use区别，loader: 'xxx'只能使用一个loader，use: 可以使用多个loader
			use: ['style-loader', 'css-loader', 'less-loader']
		}
	]
}

处理Sass和Scss资源

1、下载包

npm i sass-loader sass -D

2、功能介绍

• sass-loader： 负责将sass文件编译成css文件
• sass： sass-loader依赖sass进行编译

3、配置

module:{
	rules: [
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		},
		{
			test: /\.less$/,
			use: ['style-loader', 'css-loader', 'less-loader']
		},
		{
			test: /\.s[ac]ss$/,
			use: ['style-loader', 'css-loader', 'sass-loader']
		}
	]
}

处理Styl资源

1、下载包

npm i stylus-loader -D

2、功能介绍

• stylus-loader：负责将Styl文件编译成Css文件

3、配置

module:{
	rules: [
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		},
		{
			test: /\.less$/,
			use: ['style-loader', 'css-loader', 'less-loader']
		},
		{
			test: /\.s[ac]ss$/,
			use: ['style-loader', 'css-loader', 'sass-loader']
		},
		{
			test: /\.styl$/,
			use: ['style-loader', 'css-loader', 'stylus-loader']
		}
	]
}