Sassをgulpでコンパイルする方法をまとめてみた

npm init -y

package.json作成

npm install -D gulp gulp-sass

node_moduleができる

gulpfile.jsを作成してgulpfile.jsファイル内に以下のコードをコピペ

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});

sassファイルをcss/style.scssを作成し、を記述

// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}

npx gulp

でコンパイル。
無事下記のようにcss/style.cssにcssがコンパイルされる

div p {
  font-weight: bold; }

h1 {
  color: #525252; }

こちらの記事がわかりやすい。
https://ics.media/entry/3290/