node-sassとvisual studio code等の特定のエディタで起こるエラー対処法

3195 ワード
node-sass VisualStudioCode SublimeText3 Node.js Node.js テキストリンク

sassコンパイルのためだけにrubyを入れるのもどうなのだろうと思って入れたnode-sass
非常に便利なのだが、特定の環境で正しく動作しない状況が発生しているため、共有してみる。

TL;DR

"File to read not found or unreadable" with -w under Windows #1894
https://github.com/sass/node-sass/issues/1894

起きているエラーの再現方法

  • OS : WIndows10 Pro
  • エディタ : Visutl Studio Code v1.26.0
  • Node.js : v10.15.0

導入しているパッケージ（node-sass含む）は以下の状態

package.json
"dependencies": {
  "chokidar": "^2.1.2",
  "node-sass": "^4.11.0"
}

コマンドラインでも、jsファイルを通してnode-sassを実行してでも関係なく、ファイルを監視していると以下のようなエラーが出ることがある。
※たまに成功することもある

実際に出たエラー（一部）
File to read not found or unreadable, open '{ファイルのパス}'

要は、保存方法が特殊なエディタでコケていた。
といったところでしょうか……

回避方法

上記リンクのissus見た限り根本的な解決策は出ていなさそう…
プルリクもその場しのぎ感が凄いし（いや致し方ないのかもしれないけど…

別のエディタを利用する

Windowsのメモ帳ならエラー起きなかったです。
当たり外れがあると思って良いと思います。

実行ファイルの修正

要は保存しきれていないのにイベントが発火してしまっているので、アナログな手法で遅延処理を挟む。

 const fs       = require("fs");
 const path     = require("path").resolve();
 const sass     = require("node-sass");
 const chokidar = require('chokidar');

 const renderFileName = "chibisuke.css";
 const sassPath       = path + "\\src\\main.scss";
 const renderPath     = path + "\\dist\\" + renderFileName;

 let sassContent = fs.readFileSync(sassPath, { encoding: "utf-8" });


 chokidar.watch(sassPath, { ignored: /[\/\\]\./ }).on('all', (event, path) => {
+     setTimeout(() => {
         sassContent = fs.readFileSync(sassPath, { encoding: "utf-8" });
         sass.render({
             data: sassContent
         }, (err, result) => {
             fs.writeFileSync(renderPath, result.css);
         });
+     }, 1000);

 });

下記リンクのプルリクをあてる

楽しいnode-sassライフを（？）:)

php+mysql追加削除修正insert into delete update
PHPは配列値の中で最大のデータを取得する