2019年6月11日

複数のSassファイルをひとつのCSSファイルにまとめる

gulpを使って、複数のSassファイルをひとつのCSSファイルにまとめる。

gulpの準備

プロジェクトフォルダ(たとえばgulp-sass-test-002)を任意の場所に作って移動。

cd フォルダをドラッグ&ドロップ

フォルダを以下のように構成し、

gulp-sass-test-002
└── dev
    └── sass

簡易初期化。

npm init -y

プロジェクトフォルダ直下にgulpfile.jsを作成。

// モジュールを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass');

// 各パス
const paths = {
  "dev": {
    "sass": "./dev/sass"
  },
  "dist": {
    "css": "./dist/css"
  }
}

// SassをCSSにビルド
function sass_to_css(){
  // コンテンツを取得
  return gulp.src(paths.dev.sass + '/*.scss')
    // ビルド処理
    .pipe(sass({
      // オプション:プロパティごとに改行する
      outputStyle: 'expanded'
    }))
    // 本番に配置
    .pipe(gulp.dest(paths.dist.css));
}

// 「test」という名前でタスクを実行する
exports.test = sass_to_css;

必要なモジュールをインストール。

npm i -D gulp gulp-sass

Sassファイルの用意

sassディレクトリ直下に以下のファイルを保存する。

_hoge.scss。

.hoge {
  border: 1px solid #ccc;

  &_inner {
    padding: 20px;
  }
}

_fuga.scss。

.fuga {
  border: 1px solid #ccc;

  &_inner {
    padding: 20px;
  }
}

_piyo.scss。

.piyo {
  border: 1px solid #ccc;

  &_inner {
    padding: 20px;
  }
}

sample.scss。

@import '_hoge';
@import '_fuga';
@import '_piyo';

SassをCSSにビルドする

タスクを実行。

npx gulp test

distにCSSがビルドされれば完了。

この時、ビルドされるのはsample.cssのみで、中身は_hoge.cssと_fuga.css、_piyo.cssの内容がひとつにまとまったものになっている。

これは、アンダースコア(_)から始まるSassファイル(パーシャルファイルという)は、gulpでCSSにビルドされないから。

だから、たとえばもし「_hoge.scss」を「hoge.scss」という名前にしていた場合は、distディレクトリにhoge.cssも生成される。