webpack-less文件处理

一.  准备工作

1. 如果我们希望在项目中使用less、scss、stylus来写样式webpack是否可以帮助我们处理?

        这里以less为例，其他也是一样的
2. 先创建一个less文件，依然放在css文件夹中

@fontSize:50px;
@fontColor:black;

body{
	color: @fontColor;
	font-size: @fontSize;
}

二.  less文件处理--less-loader

1. 在官网中查找less-loader相关使用说明

2. 安装对应loader 

        这里还安装了less，因为webpack会使用less对less文件进行编译

npm install less@3.9.0 less-loader@4.0.1 --save-dev --force

3. 修改对应的配置文件，将该 loader 添加到 webpack 的配置中去

        添加一个rules选项，用于处理.less文件

			{
			    test: /\.less$/i,
			    use: [
				// compiles Less to CSS
					'style-loader',
					'css-loader',
					'less-loader',
			    ],
			}

三.  重新打包

npm run build