在webpack中使用Sass編譯css

Sass與css一樣是webpack不認識的語法，所以我們要安裝 node-sass和 sass-loader：

npm install --save-dev node-sass sass-loader

然後一樣在webpack.config.js裡新增規則：

module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ['style-loader', 'css-loader','sass-loader']
      },
    ]
  }

接著在 index.js 裡 引入sass 即可將 sass編譯後的 css 併入 index.js。

import '../sass/index.sass'

如要將 sass 編譯的css獨立拆分出來，則需將規則修改如下：

module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader','sass-loader']
        })
      },
    ]
  }