webpack 學習筆記：引入 CSS（下）

上篇文章講述如何在 webpack 中處理 .css 檔案資源。接下來，更深入一點，介紹如何在 webpack 使用前處理器 SCSS，以及為相容瀏覽器提供 CSS 屬性字首。會涉及到兩個 loader 的使用：scss-loader、postcss-loader。

sass-loader

首先安裝依賴：

npm install sass-loader sass webpack --save-dev

在 webpack.cnofig.js 中新增配置：

{
    module: {
        rules: [
            {
                test: /\.(c|sa|sc)ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
        ]
    }
}

這樣簡單的配置就可以了。這裡處理包括 .css、.sass 和 .scss 為字尾的所有檔案。

postcss-loader

首先安裝依賴：

npm install --save-dev postcss-loader postcss

配置檔案：

{
    test: /\.(c|sa|sc)ss$/i,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-preset-env',
                            {
                                browsers: 'defaults, ie >= 10'
                            },
                        ],
                    ],
                },
            }
        },
        'sass-loader'
    ]
}

注意，這裡的 postcss 是放在 sass-loader 之後處理的，我們要求相容 IE10 以上瀏覽器。

如果專案中使用瞭如下的程式碼：

// style.sass
.hello
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue

經過處理後，輸出結果如下：

.hello {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: blue
}

（完）

本作品採用《CC 協議》，轉載必須註明作者和本文連結