Zenn
Open5

node-sassの導入方法

kino_nanakino_nana

Node.jsがインストールされているか確認

  • 下記のコマンドを実行して「v~~ ~~ ~~」のように表示されればインストールは出来ている。
node -v

node-modulesをインストール

  • npmを配置するディレクトリに移動
  • 移動先で下記コマンドを実行してpackage.jsonを作成
npm init
  • 表示される設問は問題なければ全てyesでOK
  • package.jsonが作成されたか確認する
  • 確認できたら下記コマンドを実行し、node-modulesを作成する
npm install node-sass --save-dev
kino_nanakino_nana

scriptの設定

  • 任意の場所にmkdir Sassでフォルダを作る
  • Sassフォルダに移動し、main.scssファイルを作成する
  • package.jsonのscriptsを変更する
    • scriptは自身のディレクトリ構造に合わせて変更する
  "scripts": {
    "watch-sass": "node-sass ../sass/ --output ../webroot/css/ --no-source-map --watch",
    "compile-sass": "node-sass ../sass/ --output ../webroot/css/ --no-source-map"
  },
  • npm run compile-sassを実行するとコンパイルされる
  • npm run watch-sassを実行するとscssファイルに変更が入るたびにコンパイルしてくれる
    • --watchオプションを付けると変更が入るたびにコンパイルしてくれる