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的開發效率且降低代碼複雜度。

下一篇開始接觸與性能相關的問題——代碼分片。