前言
这是webpack实战系列笔记的第8篇记录——样式与处理，前几篇记录如下：
- 打包第一个应用
- 模块化与模块打包
- 资源输入与输出
- 一切皆模块
- 预处理器【上篇】
- 预处理器——常用loader【下篇】
- 样式文件分离
在目前的前端项目中，经常可以看到使用SASS和LESS来对CSS进行处理，那么在webpack中如何配置？
样式预处理
“样式预处理，指的是在开发中使用到的一些预编译语言，如SCSS. LESS等，在项目打包过程中再将这些预编译语言转换为CSS。
借助这些语言强大和便捷的特性，可以降低项目的开发及维护成本。
1. Sass 与 SCSS
1.1 关系
我们经常看到Sass与SCSS，但是有什么关系呢？我们怎么选择呢？
Sass是对CSS的语法增强，它有两种语法，现在使用的更多的是SCSS。如果你两者都使用过，那么可以发现无论是安装还是配置，都是使用 sass-loader，而编写保存的文件后缀却是：.scss。
一般而言，我们使用它需要配置以下几个loader搭配使用：
- sass-loader
- css-loader
- style-loader
- node-sass
如上，样式预处理器的安装好理解，那么为什么要安装node-loader呢？因为loader本身只是编译核心库与Webpack的连接器，因此这里我们除了Sass-loader以外还需安装node-sass，node-sass才是真正用来编译SCSS的，而sass-loader只是起到黏合作用。
1.2 安装
代码语言：javascript复制// 以下两种方式任选其一
npm install sass-loader node-sass css-loader style-loader
// 或
yarn add sass-loader node-sass css-loader style-loader
1.3 webpack配置
代码语言：javascript复制// webpack.config.js
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
1.4 测试
写一段scss测试一下：
代码语言：javascript复制// style.scss
$default-color: #f00;
.main{
&_banner{
color: $default-color;
}
}
// index.js
import './style.scss'
1.5 查看结果
从html中引入打包后的js，查看结果：
代码语言：javascript复制.main_banner {
color: #f00;
}
点击查看大图
1.6 其他配置
如果希望在浏览器的firebug里面查看及调试源码，则需要打开sourceMap配置：
代码语言：javascript复制module.exports = {
entry: {
index: './src/index.js',
},
output: {
filename: '[name].js'
},
mode: 'development',
// loader配置
module: {
rules: [
// scss
{
test: /.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
],
},
}
2. Less
“Less也是对CSS的扩展。
2.1 安装
代码语言：javascript复制// 以下两种方式任选其一
npm install less-loader less css-loader style-loader
// 或
yarn add less-loader less css-loader style-loader
2.2 webpack配置
与SCSS配置比较类似：
代码语言：javascript复制modules: {
rules: [
{
test: /.less/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
2.3 测试
代码语言：javascript复制// style.less
@default-color: red;
.main{
.title{
color: @default-color;
}
}
// index.js
import './style.less'
2.4 编译结果
与SCSS一样，打包，引入，浏览器中查看结果：
代码语言：javascript复制.main .title{
color: red;
}
小结
本篇介绍了处理样式的预处理器工具以及相关配置，通过SCSS、less等编译语言来提高CSS的开发效率且降低代码复杂度。
下一篇开始接触与性能相关的问题——代码分片。
