拡張機能で管理していたSCSSをnode.jsで管理するように変更する

package.jsonのひな型を作成する

npm init

色々効かれるが基本的にEnterを押しておけば問題ない。 押し続けているとpackage.jsonが作成されている。

sassをインストール

npm i -D sass

上記コマンドでsassをインストールする。

今回は下記バージョンがインストールされた。

"sass": "^1.58.0"

Gitでソースコードを管理している場合は、.gitignoreファイルを作成しnode_modules/と記入するのが吉。

Scriptを登録する

ちなみに今回は

/assets/scss/style.scss
↓
/assets/css/style.css

のように変換したい。

先ほど作成したpackage.jsonにScriptを登録する。

  "scripts": {
    "watch:sass": "sass --no-source-map --watch assets/scss/:assets/css/"
  },

登録後、Scriptを実行する。

$ npm run watch:sass

> media-nove@1.0.0 watch:sass
> sass --no-source-map --watch assets/scss/:assets/css/

Compiled assets\scss\style.scss to assets\css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

以降、scssを変更するたびに、コンパイルされる。

たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。

拡張機能について

拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。