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

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十分类似

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也拥有模块的特点，具体如下：

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

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

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

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

.title{color:#f938ab
}

经过编译后可能将成为.style__title__1CFy6
因此上面的参数可以解释为
[name]指的是模块名，这里被替换为style
[local]指代的是原本的选择器标识符，这里被替换为title
[hash:base64:5]指代的是一个5位的hash值，这个值是根据模块名和标识符计算的，因此不同模块中相同的标识符也不会造成样式冲突