webpack实战——样式与处理

前言

这是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 安装

// 以下两种方式任选其一
npm install sass-loader node-sass css-loader style-loader
// 或
yarn add sass-loader node-sass css-loader style-loader

1.3 webpack配置

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

1.4 测试

写一段scss测试一下：

// style.scss
$default-color: #f00;
.main{
    &_banner{
        color: $default-color;
    }
}

// index.js
import './style.scss'

1.5 查看结果

从html中引入打包后的js，查看结果：

.main_banner {
    color: #f00; 
}

结果

1.6 其他配置

如果希望在浏览器的firebug里面查看及调试源码，则需要打开sourceMap配置：

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 安装

// 以下两种方式任选其一
npm install less-loader less css-loader style-loader
// 或
yarn add less-loader less css-loader style-loader

2.2 webpack配置

与SCSS配置比较类似：

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

2.3 测试

// style.less
@default-color: red;
.main{
    .title{
        color: @default-color;
    }
}

// index.js
import './style.less'

2.4 编译结果

与SCSS一样，打包，引入，浏览器中查看结果：

.main .title{
    color: red;
}

小结

本篇介绍了处理样式的预处理器工具以及相关配置，通过SCSS、less等编译语言来提高CSS的开发效率且降低代码复杂度。

下一篇开始接触与性能相关的问题——代码分片。