🍀

gulpでSCSSの@importをできるだけ手抜きしたい [gulp-sass-glob]

2020/09/27に公開

Gulp

このプラグインを使います

gulp-sass-glob

事前準備

ディレクトリ構成

/
├ dev
  ├ scss
    ├ 0_base
      └ インポートされる様々なscss
    ├ 1_layout
    ├ 2_component
    ├ 3_project
    └ style.scss
├ root
  └ css
    └ style.css（SCSS → CSSに変換されたもの）
├ package.json
└ gulpfile.js

package.json

{
    "name": "dev",
    "version": "1.0.0",
    "author": "",
    "main": "gulpfile.js",
    "license": "ISC",
    "devDependencies": {
        "gulp": "*",
        "gulp-sass": "*",
        "gulp-sass-glob": "*"
    }
}

gulpfile.js

// 環境変数
const setting = {
	scss: {
		src: "./dev/scss/*.scss",
		dest: "./root/css"
	}
};

const gulp = require("gulp");

// SCSSプラグインの読み込み
var sass = require("gulp-sass");
// SCSSをまとめて読み込むプラグインの読み込み
var sassGlob = require("gulp-sass-glob");

// SCSSをCSSに変換するタスクを作成
gulp.task("scss", () => {
	return (
		gulp
			// 変換対象のファイル
			.src(setting.scss.src)
			//SCSSをまとめ読み込むことを許可する
			.pipe(sassGlob())
			//SCSS → CSS変換
			.pipe(sass())
			//CSSを出力（保存）
			.pipe(gulp.dest(setting.scss.dest))
	);
});

// ファイルの変更を監視してタスク実行
gulp.task("watch", () => {
	gulp.watch(setting.scss.src, ["scss"]);
});

// gulp起動時に実行するタスク
gulp.task("default", ["watch"]);

SCSS

gulp-sass-globを導入する前は、SCSSをこのようにしていました。

@charset 'utf-8';

//////////////////////////
// define
//////////////////////////
@import "0_base/vars";
@import "0_base/reset";
@import "0_base/mixin";
@import "0_base/develop";
@import "0_base/utility";

//////////////////////////
// Layout .l-
//////////////////////////
@import "1_layout/header";
@import "1_layout/footer";
@import "1_layout/side";
@import "1_layout/content";

//////////////////////////
// Component .c-
//////////////////////////
@import "2_component/title";
@import "2_component/btn";
@import "2_component/list";
@import "2_component/table";
@import "2_component/form";
@import "2_component/slide";
@import "2_component/card";

//////////////////////////
// Project .p-
//////////////////////////
@import "3_project/top";
@import "3_project/about";
@import "3_project/company";
@import "3_project/service";

インポートするSCSSを全部書いてました。
それがこうなりました！！ ↓↓↓

@charset 'utf-8';

//////////////////////////
// define
//////////////////////////
@import "0_base/vars";
@import "0_base/reset";
@import "0_base/mixin";
@import "0_base/develop";
@import "0_base/utility";

//////////////////////////
// Layout .l-
//////////////////////////
@import "1_layout/*";

//////////////////////////
// Component .c-
//////////////////////////
@import "2_component/*";

//////////////////////////
// Project .p-
//////////////////////////
@import "3_project/*";

##インポートする順番は指定できない

gulp-sass-globによって、まとめてインポートできるようになりましたが、その順番は指定できません。

###順番を守りたいものだけちゃんと書く

リセット系CSSは最初に読み込ませたいので
順番を守りたいものは、まとめ指定しないで記載します。

この部分がそれにあたります

//////////////////////////
// define
//////////////////////////
@import "0_base/vars";
@import "0_base/reset";
@import "0_base/mixin";
@import "0_base/develop";
@import "0_base/utility";

以上です。
ありがとうございました。