使用 Webpack 編譯 SCSS 檔案

Nov 9, 2017 Webpack English

Webpack 是一個很強大的工具，它不僅可以處理與合併 JS 檔案，還可以透過其他 Loader 來完成更多工作，例如：將 SCSS 檔案編譯成 CSS。因此，本篇將介紹如何利用 Webpack 單純地將 SCSS 檔案編譯並合併成一個 CSS 檔案，這邊將不會討論如何處理在 JS 中引入的 CSS。

前置作業

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

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

安裝完畢後，我們還需要修改 Webpack 設定檔。

修改 Webpack 設定檔

讓我們加入 Loader 與相關設定到 Webpack 設定檔中：

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

module.exports = {
  entry: [
    // 指定 SCSS 檔案
    path.join(__dirname, 'path', 'to', 'scss', 'style1.scss'),
    path.join(__dirname, 'path', 'to', 'scss', 'style2.scss')
  ],
  output: {
    ...
  },
  module: {
    // 加入 Loader
    rules: [{
      test: /\.(scss)$/,
      loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
    }]
  },
  plugins: [
    // 指定產生檔案名稱與路徑
    new ExtractTextPlugin({
      filename: 'path/to/css/style.css'
    })
  ]
};

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

你也可能會喜歡：

---