使用Sass

參考資料: https://hoohoo.top/blog/node-sass-tutorial/

step 1 安裝sass

在無框架的下，html檔無法讀取scss檔。
在node環境下， npm i node-sass !!!注意 依node版本需安裝不同版本的node-sass
npm node-sass

專案使用node v18.14.0 所以 npm install node-sass@8.0

step2 執行編譯 scss檔

在只有html檔和scss檔
在pakage.json檔中

 "scripts": {
    "build-css": "node-sass index.scss index.css",
  }

若有2個scss檔，key要用不同名稱

若同名稱 => 這樣的設定會造成後面的指令覆蓋前面的指令，導致只有最後一個指令會被執行。

//錯誤寫法
 "scripts": {
    "build-css": "node-sass index.scss index.css",
    "build-css": "node-sass show.scss show.css"
  }

//key要用不同名稱
 "scripts": {
    "build-css-index": "node-sass index.scss index.css",
    "build-css-show": "node-sass show.scss show.css"
  }

若有資料夾的話

"scripts": {
    "build-css-index": "node-sass stylesheets/index.scss stylesheets/index.css",
    "build-css-show": "node-sass stylesheets/show.scss stylesheets/show.css"
  }

step3 終端機 使用 Sass 編譯器將 index.scss 轉換成 index.css。

npm run build-css-index

step4 因為已經生成css檔，所以html檔<link>要"更新附檔名" 且 "路徑和名稱一致"

<link rel="stylesheet" href="index.scss" />
更改附檔名
<link rel="stylesheet" href="index.css" />

step5 畫面檢視

• Node.js 主要用於執行js檔作為server端的程式碼。

• 若要執行 html檔，需一個server提供檔案給browser，可使用Express.js 或 Node.js套件來建立一個簡單的server，在browser中localhost來看HTML檔案。

• 若只是要在browser中打開HTML，不需使用 Node.js，
  在VSCode中 選Open with Live Server

原本html檔無法讀取scss檔，藉由套件node-sass將scss檔生成css檔，再將css檔載入html檔即可。