gulp-sassでDart Sassを使用する

新しい環境でgulp-sassを設定する機会があったので、Dart Sassを使用する方法をメモ。
今回はgulpが4.0.2、gulp-sassが5.1.0を使用しています。

設定方法

プロジェクトディレクトリに移動して、使用するパッケージをインストールします。

npm install gulp sass gulp-sass --save-dev

gulpfile.jsに下記を追加します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function () {
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(sass.sync({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('css/'));
});

これで設定が完了したので、実際に@useを使ってみます。
下記ファイルを追加します。

_src/sass/_variable.scss

$color: orange;

_src/sass/_test.scss

@use "./variable" as var;
.test {
    background-color: var.$color;
}

_src/sass/style.scss

@use "./variable" as var;
@use "./test";
.sample {
  color: var.$color;
}

コンパイルを行うと、以下内容のCSSファイルが生成できました。

.test {
  background-color: orange;
}

.sample {
  color: orange;
}