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

投稿日 · 2023-03-29 · 更新日 · 2024-06-07 · 1 分 · nove-b