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

13040 ワード
PHP gulp scss Sass PHP テキストリンク

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

gulp-sass-glob
https://www.npmjs.com/package/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

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

gulpfile.js

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をこのようにしていました。

style.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を全部書いてました。
それがこうなりました！！ ↓↓↓

style.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";

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

JAVA-JAVAで双方向チェーンテーブルの添削を実現
mysqlテンポラリ・テーブルの作成