【Webpack】样式处理 - 样式预处理

样式预处理是在开发中会使用一些样式预编译语言，如scss,less等，在项目打包过程中再将这些语言转换为css，借助这些语言强大和便捷的特性，可以降低项目的开发和维护成本。
下面是目前最主流的两种预编译语言是如何配置的

sass和scss

sass本身是对css的语法增强，现在使用更多的是scss
在安装和配置都是sass-loader，而实际的文件后缀是.scss
sass-loader就是将scss语法编译为css，因此在使用时通常还要搭配css-loader和style-loader。loader本身只是编译核心库和webpack的连接器，因此还要安装node-sass，node-sass是真正用来编译scssde
用npm install 来安装包

接着来添加处理scss文件的webpack配置

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

另外，如果想要在浏览器的调试工具里查看源码，需要分别为sass-loader和css-loader单独添加source map的配置想

modu