Webpack 教學 - 編譯 SCSS 檔案 ( Webpack - Compile and convert SCSS files into a single CSS file)

Webpack 是一個很強大的工具，而且已有取代 Gulp 的趨勢。因爲不僅可以透過它來編譯與合併 JS 檔案，還可以透過其他 Loader 來處理其他檔案，例如將 SCSS 檔案編譯成 CSS。因此，本篇將介紹如何利用 Webpack 單純地將 SCSS 檔案編譯並合併成一個 CSS 檔案，這邊將不會討論如何處理在 JS 中引入的 CSS。( If you want to read this article in English, you can visit here )



前置作業
Webpack 能如此強大是因為它擁有許多 Loader，要透過 Webpack 編譯 SCSS 檔案必須安裝 Sass-loader 與其他套件，所以我們先來安裝所需 Loader 與套件：

npm install --save-dev css-loader sass-loader node-sass extract-text-webpack-plugin

安裝後，接著來調整 Webpack 設定檔。

---

修改 Webpack 設定檔
讓我們將剛剛安裝的 Loader 與套件加入設定檔，這裡將介紹比較入門的設定方式，參考如下：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    ...
    path.join(__dirname, 'path', 'to', 'scss', 'style1.scss'),
    path.join(__dirname, 'path', 'to', 'scss', 'style2.scss')
  ],
  output: {
    ...
  },
  module: {
    rules: [{
      test: /\.(scss)$/,
      loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
    }]
  },
  plugins: [
    ...
    new ExtractTextPlugin({
      filename: 'path/to/css/style.css'
    })
  ]
};

Webpack 的設定方式有很多種而且可以更深入的設定，以上是一個比較簡單的範例。

---

Environment :
  ・ Unix-like System
Reference :
  ・ Webpack
  ・ Sass-loader