Table of Contents
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を変更するたびに、コンパイルされる。
たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。
拡張機能について
拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。
