Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: SCSS を Watch していても、新規に追加した SCSS ファイルがコンパイルされない #11

Merged
merged 4 commits into from
Aug 11, 2018

Conversation

inouetakuya
Copy link
Owner

@inouetakuya inouetakuya commented Aug 10, 2018

解決したい問題

src/scss/ ディレクトリに新規の SCSS ファイルを追加したとき、当該ファイルが CSS にコンパイルされない。下記 Issue と同じ問題。

yarn run build:scss:watch を一旦止めて、実行し直せばコンパイルされるが... SCSS を積極的にファイル分割していく開発スタイルではめんどうくさい。

原因

watching newly created files · Issue #1891 · sass/node-sass に書かれているとおり、node-sass の既知の問題。

解決する気はあるらしくてプルリクつくったりしているがうまく行かなくてクローズしてたりする。

どのように解決するか?

ファイル監視の方法を変更する。下記が候補

  • gulp-watch
  • nodemon

シンプルに行くなら nodemon かなあと。

完了条件

  • SCSS ファイルを新規に追加したときに、src/css 内にコンパイルされること
  • SCSS ファイルをリネームしたときに、src/css 内に、リネーム後の CSS ファイルのみが入っていること
  • SCSS ファイルを削除したときに、src/css 内から、対応する CSS が削除されること

ファイッ!

参考

remy/nodemon: Monitor for any changes in your node.js application and automatically restart the server - perfect for development
https://github.com/remy/nodemon

@inouetakuya
Copy link
Owner Author

@ryamakuchi

ひととおりできたので、確認してほしいです。何か分からないことがあったら、なんなりとー

Copy link
Collaborator

@ryamakuchi ryamakuchi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おいちゃんのこれを見て、私の方もうまくいきました。
ありがとう!

@@ -5,12 +5,15 @@
"repository": "https://github.com/inouetakuya/html5-css3-modern-coding/my-standard-layout-scss",
"license": "MIT",
"scripts": {
"build:scss": "node-sass --recursive src/scss --output src/css",
"build:scss:watch": "yarn run build:scss && yarn run build:scss --watch",
"build:scss": "yarn run clean:css && node-sass --recursive src/scss --output src/css",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

良き!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants