「gulp-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))

// 略

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

参考

gulp-sass から Scss を疑似的な動的読み込みを行う

2021-01-26T23:55:22+09:00

経緯

Scss で @import, @use, @forward のような他のファイルを読み込む機能は、 @ディレクティブ内では使用できないません。そのため、例えば以下のようなことができません。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}

あるフラグ変数(ここでは $flag ですが、実際はファイル中ではなく Gulp タスク内で管理)が true のときのみ parts1.scss を読み込む。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}
@else {
    @use "parts2.scss";
}

あるいは、フラグ変数の値によって読み込む Scss ファイルを切り替える。

この部分について、どうにかできないか(本当にやりたいのは最初の例ですが、代替案として2つ目の例でブランクの parts2.scss をダミーとして用意する方法を考える)、と。

対処

css - Sass dynamic import based on environment - Stack Overflow

色々検索した結果、 gulp-sass の includePaths オプションを使えばそれらしいことができそうだ、ということが分かりました。

今回はたまたま自分も gulp-sass を使用している前提で、しかも Scss 本体の変数ではなく Gulp タスク内で管理しているフラグによって、というのが希望だったのでこの形はぴったりでした (この方法でなければ、上記スレの上の方にあるように、フラグをいったん Scss ファイルに変数として出力し、それを読み込むことで伝播させようと考えていました)。

const { src, dest } = require('gulp');
const plumber       = require('gulp-plumber');
const notify        = require('gulp-notify');
const sass          =  require('gulp-sass');
sass.compiler = require('sass');
const Fiber = require('fibers');
const autoprefixer  = require('gulp-autoprefixer');

// dynamic import test
const flag = true;

// scssコンパイルタスク
const scss = () => {
    let opt = {
        fiber: Fiber,
        outputStyle: 'compressed'
    };
    // dynamic import test
    if (flag) {
        opt.includePaths = [
            `src/scss/parts/enable`
        ]
    }
    else {
        opt.includePaths = [
            `src/scss/parts/disable`
        ]
    }
    return src('src/scss/**/*.scss')
        .pipe(plumber({
            errorHandler: notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'scss'
            })
        }))
        .pipe(sass(opt).on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(dest('dist/css'));
};

module.exports = scss;

Scss のコンパイルタスクはこのような感じで。

src/
　└ scss/
      ├ .scssファイル やディレクトリ
      ├ import/
      │   └ _index.scss
      │
      └ parts/
          ├ disable/
          │    └ parts_hoge.scss
          └ enable/
               └ parts_hoge.scss

このようなディレクトリ構造で、 src/scss/import/_index.scss から src/scss/parts の中のenable または disable のどちらかの parts_hoge.scss を読み込む、とした場合。

// dynamic import test
@use "parts_hoge";

src/scss/import/_index.scss の記述はこれだけですが、 Scss のコンパイルタスクに記述されている変数 flag によって読み込む元のディレクトリの候補が src/scss/parts/enable または src/scss/parts/disable のどちらかに切り替わる、ということです。

あとは src/scss/parts/disable/parts_hoge.scss は中身のないブランクのファイルにしておけば、 flag が true の場合のみ css が当たる、ということになります。

出力される css の切り分けはできたので、とりあえずはこの方法でしょうかね。