Dart SassをwebpackとGulpで使う方法

はじめに

Sassの@importが将来的に廃止になるということで新ルールが使えるdart-sassをwebpackとGulpで使う方法をまとめてみました。

webpackの場合

パッケージのインストール

Sassのビルドに必要なパッケージをインストールします。
sassがDart Sassです。
fidersは処理速度でエラーが出るの回避するのに必要なパッケージです。

yarn add webpack webpack-cli style-loader css-loader postcss-loader sass-loader sass fibers -D

設定ファイル

webpack.config.jsに設定を記述します。

const Sass = require('sass');
const Fibers = require('fibers');
module.exports = {
  ... //entryやoutputの設定を記述
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            implementation: Sass,
            sassOptions: {
              fiber: Fiders
            },
          }
        ]
      }
    ]
  }
};

Gulpの場合

パッケージのインストール

webpackと同様、sassとfibersをインストールします。
細かい設定を省くと必要なパッケージは以下になります。

yarn add gulp gulp-sass sass fibers -D

設定ファイル

gulpfile.jsに設定を記述します。

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const Fibers = require('fibers');
gulpSass.compiler = require('sass'); //Dart Sassを指定
const taskSass = () => {
  return gulp
    ... // srcやplumberの設定を記述
    .pipe(
      gulpSass({
        fiber: Fibers,
        outputStyle: 'expanded',
      })
    )
    ... // destの設定を記述
};
exports.sass = taskSass;

さいごに

webpackもGulpもsassとfibersをインストールし、設定に追記するとDart Sassを使用できます。
@useや@forwardを使ってみたいという人は試してみてください。