「Sass」の記事 - Crieit

gulp-sass を Node.js v16 環境に合わせて調整する

2021-07-05T20:32:23+09:00

Node.js の 16系を試そうとしたら gulp-sass, node-sass 周りでエラーが発生したので対処をまとめておきます。

経緯

まず前提として

Dart Sass で / を使った徐算が非推奨となった (代わりに math.div を使えとのこと)
- 参考: Dart Sass で DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. の警告が表示される - Ewig Leere(Lab2)
上述現象を回避するため、 sass のバージョンを 1.32.12 で固定していた

という事情があります。

現象

この状態で Node.js のバージョンを 16系に切り替えて yarn 。

error /home/node/app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /home/node/app/node_modules/node-sass
Output:
Building: /usr/local/bin/node /home/node/app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=

# 略

In file included from /home/node/.node-gyp/16.3.0/include/node/v8.h:30,
                 from /home/node/.node-gyp/16.3.0/include/node/node.h:63,
                 from ../../nan/nan.h:56,
                 from ../src/binding.cpp:1:
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h: In function 'void v8::internal::PerformCastCheck(T*)':
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: 'remove_cv_t' is not a member of 'std'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~~~
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: note: suggested alternative: 'remove_cv'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~
                                      remove_cv
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: 'remove_cv_t' is not a member of 'std'
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: note: suggested alternative: 'remove_cv'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~
                                      remove_cv
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:50: error: template argument 2 is invalid
             !std::is_same>::value>::Perform(data);
                                                  ^
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:63: error: '::Perform' has not been declared
             !std::is_same>::value>::Perform(data);
                                                               ^~~
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:63: note: suggested alternative: 'herror'
             !std::is_same>::value>::Perform(data);
                                                               ^~~
                                                               herror
../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)':
../src/binding.cpp:284:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
                                                                                                  ^~~~~~~~
../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)':
../src/binding.cpp:320:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
                                                                                                  ^~~~~~~~
In file included from ../../nan/nan.h:56,
                 from ../src/binding.cpp:1:
../src/binding.cpp: At global scope:
/home/node/.node-gyp/16.3.0/include/node/node.h:806:43: warning: cast between incompatible function types from 'void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)' {aka 'void (*)(v8::Local)'} to 'node::addon_register_func' {aka 'void (*)(v8::Local, v8::Local, void*)'} [-Wcast-function-type]
       (node::addon_register_func) (regfunc),                          \
                                           ^
/home/node/.node-gyp/16.3.0/include/node/node.h:840:3: note: in expansion of macro 'NODE_MODULE_X'
   NODE_MODULE_X(modname, regfunc, NULL, 0)  // NOLINT (readability/null_usage)
   ^~~~~~~~~
../src/binding.cpp:358:1: note: in expansion of macro 'NODE_MODULE'
 NODE_MODULE(binding, RegisterModule);
 ^~~~~~~~~
make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
make: Leaving directory '/home/node/app/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/node/app/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Linux 5.10.25-linuxkit
gyp ERR! command "/usr/local/bin/node" "/home/node/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/node/app/node_modules/node-sass
gyp ERR! node -v v16.3.0

……滅茶苦茶怒られました (Docker内のLinux環境)。

ちなみに Windows環境だと yarn 時にはエラーにはなりませんが、 Gulpタスクを走らせた際に同様のエラーメッセージが表示されます。

対処1 (sass, gulp-sass のバージョンを上げる)

そこでまずは sass のバージョンを上げます。

ちなみに、 1.35.0以降では quietDeps: true のフラグを追加することで、冒頭の警告を非表示にできるようになったとのことなので、そもそもの問題は回避できるはずです。

    "devDependencies": {
        // 略
        "gulp-sass": "^4.1.0",
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "fibers": "^5.0.0",
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

これで yarn してみましたが、ダメ。

ふと gulp-sass を見てみると、いつの間にか 5.0.0 がリリースされているではありませんか。

    "devDependencies": {
        // 略
        "gulp-sass": "^5.0.0",        // 4.1.0 からアップデート
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "fibers": "^5.0.0",
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

そこで、 gulp-sass も上げます。これで yarn すると正常に完了。

安心して Gulpタスクを走らせると……

../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.

…別のエラーで怒られました。

対処2 (fibers を削除)

node.js - (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134 - Stack Overflow

検索すると上述のエラーは fibers が Node.js 16系に対応していないために発生している模様。

そのため、 fibers を削除します。

    "devDependencies": {
        // 略
        "gulp-sass": "^5.0.0",        // 4.1.0 からアップデート
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

併せてタスクも書き換えます。

const sass          = require('gulp-sass');
sass.compiler       = require('sass');
//const Fiber         = require('fibers');

// 略

            .pipe(sass({
//                fiber: Fiber,
                outputStyle: 'compressed',
                quietDeps: true            // 警告回避のために追加
            }).on('error', sass.logError))

// 略

fibers 関係を削除。

これで yarn し直してタスクを再実行。

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

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

……別のエラーが発生しました。どうやら gulp-sass の Scssトランスパイラの指定方法が変わったようです。

対処3 (gulp-sass のScssトランスパイラ指定方法を変更)

const sass          = require('gulp-sass')(require('sass'));
//const Fiber         = require('fibers');

// 略

            .pipe(sass({
//                fiber: Fiber,
                outputStyle: 'compressed',
                quietDeps: true            // 警告回避のために追加
            }).on('error', sass.logError))

// 略

これでようやくタスクが正常に走るようになりました。

参考

Dart Sass で DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. の警告が表示される

2021-06-07T23:12:54+09:00

現象

最近 Dart Sass で Scss をトランスパイルすると、

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

という警告が表示されるようになりました。

より詳細には以下のような感じです。

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
308 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules\bootstrap-honoka\scss\honoka\_variables.scss 308:31  @import
    src\scss\global\honoka\_honokaImport.scss 7:9                     @forward
    src\scss\global\_framework.scss 3:1                               @use
    src\scss\foundation\_override.scss 4:1                            @use
    src\scss\foundation\_index.scss 3:1                               @use
    src\scss\contents.scss 8:1                                        root stylesheet

調査

調べると、 Dart Sass では徐算に / を使った記述 (上述の例では $spacer / 2 ) は非推奨となり、代わりに math.div($spacer, 2) というように、ビルトインモジュールの math を使うように求められるようです。

なお、将来的には非推奨ではなく使用不可にしていく模様。

さて、問題はこの警告、大半が Bootstrap の中で発生しているということ。

自分で書いたコードのみならば修正していくのも吝かではないですが、 Bootstrap 本体となるとあまり手は入れたくないし、量も大量にあると想定されるので面倒なことになりそうです。

回避

上述より、根本的対処ではなく Dart Sass のパッケージ指定を固定するという一時的な回避策で逃げたいと思います。

    // 略
    "devDependencies": {
        // 略
        "sass": "1.32.12",
        // 略
    },
    "resolutions": {
        // 略
        "sass": "1.32.12"
    },
    // 略

これでひとまず警告は出なくなりました。

後は Bootstrap 等が対応してくれることを祈る感じですかね……。

参考

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

2020-12-02T23:50:23+09:00

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数・マップを上書きしたくなったので実験してみました。

今まで (node-sass / LibSass)

前提

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

今回の検証で使用するプロジェクトのディレクトリ構造は、このような状態とします。

src/html/index.html


    プライマリーボタン
    メインボタン

例として、こんな HTML があったとして。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

マップの定義を上書きするコードを書きます。

src/scss/foundation/_index.scss

@import "variables"; //変数(Bootstrap の変数上書きのコードあり)
@import "mixin";
@import "../assets/bootstrap/bootstrap"; //bootstrap

同じ foundation の中に読み込み用の Scss を用意します。

注意する点としては、「 Bootstrap の Scss を読み込むより前に、 Bootstrap の変数(マップ)を上書きするための自前の定義が書かれた Scss を読み込む」ということ。

src/scss/index.scss

@import "./foundation/index"; //読み込み

最後に、実際に index.css にコンパイルされる src/scss/index.scss で src/scss/foundation/_index.scss を読み込みます。

今までは、これで変数の上書きができました。

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

さて、ここで単純に今まで @import で記述していたのを @use, @forward に書き換えてみます。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

上書きしたい変数(マップ)の定義はそのまま。

src/scss/foundation/_index.scss

@forward "scss_variables"; //変数(Bootstrap の変数上書きのコードあり)
@forward "mixin";
@forward "../assets/bootstrap/bootstrap"; //bootstrap

今度は @import ではなく、 @forward に書き換えます。

src/scss/layout/_l-header.scss

@use "../foundation" as f;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に src/scss/foundation/_index.scss を読み込んで使用する Scss で @use による読み込みを行います。

src/scss/index.scss

@use "layout/l-header"; //_l-header.scss の中で @use を使って src/scss/foundation/_index.scss を読み込み、使用
@use "layout/l-main";
@use "layout/l-footer";

こんな形に書き換えます。

流れとしては、「src/scss/index.scss -(@use)-> src/scss/layout/_l-header.scss -(@forward)-> src/scss/foundation/_index.scss」という関係。

この状態で Dart Sass によるコンパイルを実行すると、$theme-colors の変数名が重複しているのでエラーになってしまいます。

Error: src/scss/foundation/_index.scss
Error: Two forwarded modules both define a variable named $theme-colors.
    ╷
3   │ @forward "variables";
    │ ━━━━━━━━━━━━━━━━━━━━ original @forward
... │
5   │ @forward "../assets/bootstrap/bootstrap"; //bootstrap
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
    ╵
  src/scss/foundation/_index.scss 5:1  @use
  src/scss/layout/_l-header.scss 3:1   @use
  src/scss/index.scss 8:1              root stylesheet

回避するためにはいくつかの方法が考えられますが、 Bootstrap 4 の @import を書き換えていくのは大変な上に既存ライブラリに手を入れるのはできれば避けたいので今回は不採用。

他の方法としては with を使う方法が考えられます。

ただし、これもいくつか工夫が必要です。

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)

安直に with を使おうかと考えましたが、構文的に with は @use でしか使えません。

そのため、以下のような書き換えは不可です。

src/scss/foundation/_index.scss

@forward "../assets/bootstrap/bootstrap" with (
    /* with の中では use で読み込んだファイルのスコープは使えない */
    $theme-colors: (
        /* 上書き */
        primary: #333,
        /* デフォルトにないカラーの追加 */
        main: red,
    ),
); //bootstrap

Dart Sass での検証3 (失敗 / ファイルスコープ)

@use とセットで使うということが分かったので、今度は @use で読み込んでいる場所で with を付けたそうと思いました。

src/scss/layout/_l-header.scss

@use "../foundation" as f with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

ただし、このような既述をすると以下のエラーが発生します。

Error: src/scss/layout/_l-header.scss
Error: There is no module with the namespace "f".
  ╷
7 │         primary: f.$own-color,
  │                  ^^^^^^^^^^^^^
  ╵
  src/scss/layout/_l-header.scss 7:18  @use
  src/scss/index.scss 8:1              root stylesheet

with の中では、その直前で既述した名前空間はまだ使えません。

「独自に定義したメインカラーでプライマリーカラーを上書きしたい」というケースが多いと思われるので、 with で上書きするときにメインカラーが変数で指定できないのは困ります。

そこで、独自定義の変数読み込みと Bootstrap 4 の読み込み部分を分けることにしました。

最終形

ディレクトリ構造

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ global/
       │    └ _index.scss      # 追加
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

src/scss/foundation/_scss_variable.scss

先程まであった上書き用のコードは削除。

src/scss/foundation/_index.scss

@forward "variables";
@forward "mixin";

Bootstrap 4 を読み込む @forward を削除。

src/scss/global/_index.scss

@forward "../assets/bootstrap/bootstrap"; //bootstrap

Bootstrap 4 を読み込む部分を切り出したのを、 src/scss/global/_index.scss とします。

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に使う部分。変数は foundation, Bootstrap 4 は global で読み込み、 foundation を先に読み込むことで、 with の中で使用できるようにしました。

src/scss/index.scss

@use "layout/l-header";
@use "layout/l-main";
@use "layout/l-footer";

index.css になる部分は読み込みだけ。

この形にすることでようやく当初意図していた形にすることができました。

備考1

今回の方法では Bootstrap 4 の中身は一切触れない方向で実装しました。そのため、 Bootstrap 4 の中は以前として @import で読み込まれており、変数はグローバルスコープに定義されるようです。

そのため、今回は src/scss/layout/_l-header.scss でしか with を使用していませんが……

デフォルト状態ではこのような状態になります(プライマリーカラーがデフォルト、右側はデフォルト状態では存在しない btn-main クラスが付与されているため背景色なし)。

src/scss/layout/_l-header.scss に with を適用しただけで、メイン部分のボタンも影響を受けます。今回の場合は「全体で色を変更したい」のでこれで良いのですが、 @use や @forward の位置付けからすると役割を発揮できていない状態なので微妙なところ。

今後、 Bootstrap が @use, @forward に変更した場合にこの辺りの挙動は変わると思われます。

※ちなみに、v5.0.0-alpha3 でもまだ @import でした。

備考2

備考1と関連しますが、グローバルスコープに定義されるということは……

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

src/scss/layout/_l-header.scss は普通に src/scss/global/_index.scss を読み込み……

src/scss/layout/_l-main.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-main {
    background-color: f.$own-bg-color;
    color: f.$own-color;
    .btn-main {
        color: f.$own-color;
    }
}

// 略

src/scss/layout/_l-header.scss の後に読み込まれる src/scss/layout/_l-main.scss で with を使用した場合、以下のエラーが発生します。一度読み込んだモジュールが with 使用で再度読み込まれている、という旨のエラーですね。

Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

Error: src/scss/layout/_l-main.scss
Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

そのため、 with を使用するならば全体を通して src/scss/global/_index.scss が最初に @use で読み込まれる部分に既述する必要があります。

以上、知らないと全体的に嵌まり所が多い感じだったのでメモしておきます。

参考

with

今までのやり方 (参考)

Bootstrap4のテーマをカスタマイズする３つの簡単な方法 | ホムペディア

Bootstrap (v5.0.0-alpha3)

twbs/bootstrap at v5.0.0-alpha3

Gulp 4 で SCSS + Stylelint + Webpack + ESLint + Edge.js + BrowserSync なフロントエンド環境構築

2018-11-12T00:32:00+09:00

（ブログからのクロス投稿です。）

この記事では、Gulp 4でフロントエンドの開発環境を構築する方法を紹介します。Gulp 4をタスクランナーとして、CSSのトランスパイルに SCSS + Stylelint、JavaScript のトランスパイルに Webpack + ESLint、、テンプレートエンジンとして Edge.js、さらにローカルサーバーとして BrowserSync を組み合わせます。

私はどちらかというとサーバサイドな人でフロントエンド専門ではないのですが、モックアップ作ったりで HTML コーディングしたくなって、いまさらながら Gulp で自分なりの環境構築をしたので結果を共有します。

フロントエンドと言っても全面的に React や Vue でゴリゴリアプリケーションを書くというより HTML コーディングの範疇内でのユースケースを想定しています（フレームワークでゴリゴリしたいなら create-react-app とか vue-cli とか使うといいです）。

概要

サンプルコードも含めた設定の全体についてはこちらのリポジトリを参照してください。

依存パッケージ

https://github.com/MasahiroHarada/gulp-4-starter/blob/master/package.json

ちなみに開発環境は Node v10.7.0、npm v6.4.1 です。

ビルドコマンド

最終的なビルドコマンドは以下の通りです。

// 開発ビルド：監視モードで実行されます。
$ npm run dev

// 本番ビルド：JavaScript が圧縮されます。
$ npm run prod

ビルドタスク

gulpfile.babel.js

ES Modules（import/export）を使用したかったのでファイル名に .babel をつけて Babel のトランスパイルがかかるようにしました。

gulpfile.babel.js

import { series, parallel, watch } from 'gulp';

import { reload, serve } from './tasks/server';
import { styles } from './tasks/styles';
import { scripts } from './tasks/scripts';
import { templates } from './tasks/templates';
import { images } from './tasks/images';
import { clean } from './tasks/clean';

import {
  sass as sassConfig,
  scripts as jsConfig,
  images as imagesConfig,
  templates as templatesConfig
} from './tasks/config';

/**
 * ファイルの変更を監視
 */
function watchFiles() {
  // Sass
  watch(sassConfig.src, series(styles, reload));
  // Templates
  watch(
    [templatesConfig.edges, templatesConfig.data, templatesConfig.helper],
    series(templates, reload)
  );
  // JavaScript
  watch(jsConfig.src, series(scripts, reload));
  // Images
  watch(imagesConfig.src, series(images, reload));
}

/**
 * 開発用ビルド
 */
export const dev = series(
  clean,
  parallel(styles, templates, scripts, images),
  serve,
  watchFiles
);

/**
 * 本番用ビルド
 */
export const build = series(
  clean,
  parallel(styles, templates, scripts, images)
);

前述の通り gulpfile を ES2015 以降の構文で書くために Babel の設定ファイルも追加します。

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { "node": "current" }
      }
    ]
  ]
}

タスクを色々書くと長くなってしまうので、個別のタスクはそれぞれ別ファイルに分け、tasks ディレクトリに格納しています。

それぞれ見ていきましょう。

設定ファイル

まずは設定ファイルです。パスの設定が入っています。

tasks/config.js

const ASSET_ROOT = 'src';
const DEST_ROOT = 'public';

export const sass = {
  src: `${ASSET_ROOT}/sass/**/*.scss`,
  dest: `${DEST_ROOT}/styles`
};

export const scripts = {
  srcRoot: `${ASSET_ROOT}/js`,
  src: `${ASSET_ROOT}/js/**/*.js`,
  dest: `${DEST_ROOT}/js`,
  babelrc: {
    presets: [['@babel/env', { targets: '> 0.25%, not dead' }]]
  }
};

export const templates = {
  root: `${ASSET_ROOT}/templates`,
  edges: `${ASSET_ROOT}/templates/**/*.edge`,
  pages: `${ASSET_ROOT}/templates/pages/**/*.edge`,
  data: `${ASSET_ROOT}/templates/data.json`,
  helper: `${ASSET_ROOT}/templates/helper.js`,
  dest: DEST_ROOT
};

export const images = {
  src: `${ASSET_ROOT}/images/**/*.*`,
  dest: `${DEST_ROOT}/images`
};

export const isProd = process.env.NODE_ENV === 'production';

BrowserSync

ファイルの変更を検知して自動でブラウザをリロードさせるため、BrowserSync のタスクを作成します。設定方法はこちら（Minimal BrowserSync setup with Gulp 4）を参考にしました。

tasks/server.js

import browserSync from 'browser-sync';

const server = browserSync.create();

/**
 * 開発用サーバ再起動
 */
export function reload(cb) {
  server.reload();
  cb();
}

/**
 * 開発用サーバ起動
 */
export function serve(cb) {
  server.init({
    server: {
      baseDir: './public'
    }
  });
  cb();
}

Clean

ファイルの出力前に出力先の既存ファイルを削除しておくためのタスクです。

tasks/clean.js

import del from 'del';

/**
 * 出力先のディレクトリを空にする
 */
export function clean() {
  return del(['public']);
}

スタイル

スタイルに関しては2つのタスクを定義しています。

まず1つめはSCSS を CSS に変換するためのタスクです。ソースマップ生成（gulp-sourcemaps）とファイル圧縮（gulp-clean-css）も実行しています。

2つめは CSS（今回は SCSS）の構文チェックツール Stylelint を実行するためのタスクです。gulp-stylelint を使用します。またファイルの監視中に毎回すべてのファイルを lint せず変更があったファイルのみチェックするために gulp-changed-in-place というプラグインも使用します。

tasks/styles.js

import gulp from 'gulp';
import gulpSass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import cleancss from 'gulp-clean-css';
import plumber from 'gulp-plumber';
import gulpStylelint from 'gulp-stylelint';
import changed from 'gulp-changed-in-place';

import { sass as config, isProd } from './config';

/**
 * SCSS -> CSS
 */
export function sass() {
  return gulp
    .src(config.src)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(gulpSass().on('error', gulpSass.logError))
    .pipe(cleancss())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.dest));
}

/**
 * Stylelint
 */
export function stylelint() {
  return gulp
    .src(config.src)
    // firstPass は初回実行時に全ファイルを対象とするかどうかのオプション
    .pipe(changed({ firstPass: true }))
    .pipe(gulpStylelint({
      failAfterError: isProd,
      reporters: [{ formatter: 'verbose', console: true }],
      syntax: 'scss'
    }));
}

export const styles = gulp.series(stylelint, sass);

Stylelint の設定ファイルです。

```json:.stylelintrc
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-order"],
"rules": {
"order/properties-alphabetical-order": true
}
}


### 画像圧縮

[gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) を使って画像圧縮を行うタスクです。

オプションはお好みでどうぞ。

tasks/images.js

```js
import gulp from 'gulp';
import imagemin from 'gulp-imagemin';

import { images as config } from './config';

export function images() {
  return gulp
    .src(config.src)
    .pipe(imagemin())
    .pipe(gulp.dest(config.dest));
}

Edge.js → HTML

テンプレートエンジン Edge.js のファイルを HTML に変換するためのタスクです。

Edge.js について詳しくはこちらの記事もご覧ください。

tasks/templates.js

import gulp from 'gulp';
import edge from 'edge.js';
import tap from 'gulp-tap';
import rename from 'gulp-rename';
import fs from 'fs';
import path from 'path';

import { templates as config } from './config';

/**
 * Edge.js -> HTML
 */
export function templates() {
  // テンプレートを読み込む
  edge.registerViews(path.join(__dirname, `../${config.root}`));

  // データファイルを読み込む
  const data = fs.existsSync(config.data)
    ? JSON.parse(fs.readFileSync(config.data, 'utf8'))
    : {};

  // ヘルパー関数を読み込む
  fs.existsSync(config.helpers) && require(`../${config.helper}`);

  return gulp
    .src(config.pages)
    .pipe(
      tap(file => {
        const contents = edge.renderString(String(file.contents), data);
        file.contents = new Buffer(contents);
      })
    )
    .pipe(rename({ extname: '.html' }))
    .pipe(gulp.dest(config.dest));
}

JavaScript

タスク esTranspile は Webpack により JavaScript のトランスパイル〜バンドルを行います。

また esLint タスクではコードのチェックのために ESLint を実行します。gulp-eslint プラグインを使用します。

tasks/scripts.js

import gulp from 'gulp';
import gulpIf from 'gulp-if';
import plumber from 'gulp-plumber';
import gulpEslint from 'gulp-eslint';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import changed from 'gulp-changed-in-place';

import { scripts as config, isProd } from './config';

export function esTranspile() {
  return gulp
    .src(config.src)
    .pipe(plumber())
    // gulp.watch と一緒に使う場合は第二引数が必須らしい。
    // https://www.npmjs.com/package/webpack-stream#usage-with-gulp-watch
    .pipe(gulpWebpack(require('../webpack.config.js'), webpack))
    .pipe(gulp.dest(config.dest));
}

export function esLint() {
  return gulp
    .src(config.src)
    .pipe(changed({ firstPass: true }))
    .pipe(gulpEslint())
    .pipe(gulpEslint.format())
    .pipe(gulpIf(isProd, gulpEslint.failAfterError()));
}

export const scripts = gulp.series(esLint, esTranspile);

Webpack の設定ファイルです。

webpack.config.js

import { scripts as config } from './tasks/config';

module.exports = {
  mode: process.env.NODE_ENV ? 'production' : 'development',
  entry: {
    app: `./${config.srcRoot}/app.js`
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  },
  output: {
    filename: '[name].js',
  },
  devtool: 'source-map'
}

複数のファイルを出力したい場合は、以下のように entry に追記すれば OK です。

entry: {
  app: `./${config.srcRoot}/app.js`,
  foo: `./${config.srcRoot}/foo.js`
},

こちらはESLint の設定ファイルです。

.eslintrc

{
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

フォーマッタ

フォーマッタはオマケです。お好みの設定＆エディタと連携していただければ。

EditorConfig

.editorconfig

root = true

[*]
end_of_line = lf
insert_final_newline = true

[*.{html,edge,scss,css,js,svg}]
indent_style = space
indent_size = 2

Prettier

.prettierrc

{
  "singleQuote": true
}

以上です。参考になれば幸いです。

フォントのアンチエイリアス設定

2018-05-31T18:41:24+09:00

webkitとfirefoxで記法が違って紛らわしいので備忘録

// フォントのアンチエイリアス
=font-smoothing($type)
  @if $type == 'subpixel-antialiased'
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: unset
  @if $type == 'antialiased'
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

「Sass」の記事 - Crieit

gulp-sass を Node.js v16 環境に合わせて調整する

Dart Sass で DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. の警告が表示される

【VSCode】拡張機能一覧（主にWeb系システム開発用）

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

Dart Sass での検証1 (失敗 / 単純に @import を @use, @forward に書き換え)

Dart Sass での検証2 (失敗 / @foward ～ with)

Gulp 4 で SCSS + Stylelint + Webpack + ESLint + Edge.js + BrowserSync なフロントエンド環境構築

フォントのアンチエイリアス設定

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)