【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配置

dart 复制代码

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

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

dart 复制代码

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

less

less也是对css的一种扩展，与scss类似，也需要安装loader和其本身编译模块，在配置上也和scss十分类似

dart 复制代码

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

less支持多种编译过程中的配置，可以直接通过loader的options将这些配置传入（注意使用驼峰命名）

css modules

css modules是最近比较流行的一种开发模式，其理念是把css模块化，让css也拥有模块的特点，具体如下：

每个css文件中的样式都拥有单独的作用域，不会和外界发生命名冲突
对css进行依赖管理，可以通过相对路径引入css文件
可以通过composes轻松复用其他css模块

使用css modules不需要额外安装模块，只要开启css-loader中的modules配置项即可

dart 复制代码

module:{
	rules:[
		{
			test:/\.css/,
			use:[
				'style-loader',
				{
					loader:'css-loader',
					options:{
						sourceMao:true,
						locaIdentName:'[name]__[local]__[hash:base64:5]',
					},
				},
				]
		}
	]
}

这里localIdentName配置项是用于指明css代码中的类名会如何来编译，例如，源码是下面的形式：

dart 复制代码

.title{
	color:#f938ab
}

经过编译后可能将成为.style__title__1CFy6

因此上面的参数可以解释为

[name]指的是模块名，这里被替换为style

[local]指代的是原本的选择器标识符，这里被替换为title

[hash:base64:5]指代的是一个5位的hash值，这个值是根据模块名和标识符计算的，因此不同模块中相同的标识符也不会造成样式冲突