Webpack 处理css less sass资源

Webpack 处理css资源

首先需要安装 css-loader

npm install --save-dev css-loader
npm i style-loader -D

引入样式

import css from "file.css"

webpack.config.js

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

处理less资源（sass和less差不多）

npm install less less-loader --save-dev 

module.exports = {
//加载器
module:{
  rules:[
	test:/\.less$/, 
	//loader:'',          //只能使用一个loader      
	use:[				  //可以使用多个loader
		"style-loader",  
		"css-loader",
		"less-loader"     //将less编译成css文件 
	]
  ],
},
}