vue3 scss how to setup

協助你設定 Vue 3 專案並使用 SCSS。✨

以下是如何進行設定的步驟：

準備工作 🛠️

在開始之前，請確保你的電腦已經安裝了 Node.js 和 npm (或 yarn)。你可以在終端機輸入 node -v 和 npm -v 來檢查版本。

設定 Vue 3 專案 🚀

最簡單的方法是使用 Vite，這是一個現代化的前端建構工具，能提供極快的開發體驗。

1. 創建 Vue 3 專案： 打開你的終端機，然後執行以下指令：
   bash

   # 使用 npm
   npm create vite@latest my-vue-app --template vue
   
   # 使用 yarn
   yarn create vite my-vue-app --template vue
   

   • my-vue-app 是你的專案名稱，你可以自行更改。
   • --template vue 指定我們要使用 Vue 模板。
2. 進入專案目錄並安裝依賴：
   bash

   cd my-vue-app
   npm install
   # 或
   yarn install
   

安裝 SCSS 🎨

1. 安裝 Sass 套件： 你需要安裝 sass 套件，它是一個 SCSS 編譯器。
   bash

   npm install -D sass
   # 或
   yarn add -D sass
   

   • -D 或 --dev 表示將 sass 安裝為開發依賴。

在 Vue 3 中使用 SCSS ✍️

現在你已經安裝了 SCSS，可以在你的 Vue 組件中使用它了。

1. 在 .vue 組件中使用 SCSS： 在你的 .vue 文件中，只需將 <style> 標籤的 lang 屬性設置為 scss 即可。
   範例：src/App.vue
   vue

   <template>
     <div class="container">
       <h1>你好，Vue 3 + SCSS!</h1>
       <button class="my-button">點我</button>
     </div>
   </template>
   
   <script setup>
   // 你的 JavaScript 或 TypeScript 程式碼
   </script>
   
   <style lang="scss">
   // SCSS 變數和規則
   $primary-color: #42b983; // Vue 的綠色
   $font-stack: Helvetica, sans-serif;
   
   .container {
     font: 100% $font-stack;
     color: $primary-color;
     text-align: center;
     margin-top: 50px;
   }
   
   .my-button {
     background-color: $primary-color;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.1em;
   
     &:hover {
       background-color: darken($primary-color, 10%);
     }
   }
   </style>
   

2. 創建 SCSS 全局樣式文件 (可選)： 你也可以創建一個 SCSS 文件來存放全局變數、mixin 或通用樣式，然後在需要的地方導入。
   • 創建一個文件，例如：src/styles/main.scss
     scss

     // src/styles/main.scss
     $base-font-size: 16px;
     $secondary-color: #333;
     
     body {
       font-family: 'Arial', sans-serif;
       font-size: $base-font-size;
       color: $secondary-color;
       line-height: 1.6;
     }
     
     @mixin flex-center {
       display: flex;
       justify-content: center;
       align-items: center;
     }
     

   • 在 main.js (或 main.ts) 文件中導入這個全局 SCSS 文件：
     javascript

     // src/main.js
     import { createApp } from 'vue'
     import App from './App.vue'
     import './styles/main.scss' // 導入全局 SCSS
     
     createApp(App).mount('#app')
     

運行開發伺服器 ▶️

在你的專案目錄中，執行以下指令來啟動開發伺服器：

bash

npm run dev
# 或
yarn dev

現在你可以在瀏覽器中打開顯示的 URL (通常是 http://localhost:5173/) 來查看你的應用程式了！🥳

Explain/Summary

Part 1: Simplest Explain/Summary (最簡說明)

1. 創建專案： 使用 Vite 快速創建 Vue 3 專案 (npm create vite@latest my-vue-app --template vue)。
2. 安裝 SCSS： 在專案中安裝 Sass 套件 (npm install -D sass)。
3. 使用 SCSS： 在 .vue 文件中的 <style> 標籤加上 lang="scss"，就可以寫 SCSS 了。

Part 2: Detailed Explain/Summary (詳情說明)

1. 專案初始化：
   • 我們使用現代化的建構工具 Vite 來快速建立 Vue 3 專案。
   • 執行 npm create vite@latest my-vue-app --template vue 指令，它會引導你創建一個名為 my-vue-app 的 Vue 專案。
   • 接著進入專案目錄 (cd my-vue-app) 並安裝所有必要的套件 (npm install)。
2. SCSS 整合：
   • SCSS (Sassy CSS) 是一種 CSS 的預處理器，提供了變數、嵌套、mixin 等強大功能，讓 CSS 編寫更有效率且有組織。
   • 為了讓 Vue 專案能夠編譯 SCSS，我們需要安裝 sass 這個套件。在專案的根目錄執行 npm install -D sass 指令將它安裝為開發依賴。
3. 在 Vue 組件中使用 SCSS：
   • 組件級樣式： 在你的單一文件組件 (Single File Component, SFC) .vue 文件中，你可以在 <style> 標籤上添加 lang="scss" 屬性。這樣，該組件中的樣式就會被編譯為 SCSS。
     vue

     <style lang="scss">
       // 在這裡寫你的 SCSS 程式碼
       $color: blue;
       .my-class {
         color: $color;
       }
     </style>
     

   • 全局樣式： 你可以創建一個 SCSS 文件（例如 src/styles/main.scss），在裡面定義全局變數、mixin 或基礎樣式。然後，在你的應用程式的入口文件 (src/main.js 或 src/main.ts) 中導入這個 SCSS 文件，讓這些樣式在整個應用程式中生效。
     javascript

     // src/main.js
     import './styles/main.scss'; // 導入全局 SCSS
     

4. 開發與運行：
   • 設定完成後，你可以使用 npm run dev (或 yarn dev) 來啟動開發伺服器。Vite 會自動偵測 SCSS 檔案並進行編譯，提供熱重載 (hot module replacement) 功能，讓你即時看到樣式變更。

希望這些步驟對你有幫助！如果在設定過程中遇到任何問題，隨時都可以再問我喔！😊