2-2 (webapack4 loader)-webpack编译less和sass文件

1.webpack编译less
首先在入口的文件夹下新建index.less文件，写入样式。在index.js文件中引入index.less，代码为import './index.less';
1）安装loader
需要安装less-loader和less
打开终端，进入到项目文件夹的路径，输入命令npm install less-loader less --save-dev，如下图所示：
2）配置loader
在webpack.config.js里配置module中的rules，代码为：

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

3)在终端输入命令npm run dev进行打包。
这时，在写html文件时，就可以用到index.less的样式啦。

2.webpack编译Sass
首先在入口的文件夹下新建index.scss文件，写入样式。在index.js文件中引入index.scss，代码为import './index.scss';
1）安装loader
需要安装sass-loader和node-sass
打开终端，进入到项目文件夹的路径，输入命令npm install sass-loader node-sass --save-dev进行安装。
2）配置loader
在webpack.config.js里配置module中的rules，代码为：

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

3)在终端输入命令npm run dev进行打包。
这时，在写html文件时，就可以用到index.scss的样式啦。