在專案中使用 SCSS/SASS 進行樣式編寫無疑會節省很多開發樣式的時間。關於如何在 vue-cli v3.0 中使用 SCSS/SASS，這裡提供三種方案。前提是在使用 vue-cli 生成專案時勾選了 CSS Pre-processors (CSS前處理器)，否則無法在專案中直接使用。
方案一：在元件中直接使用
在元件中直接使用 SCSS/SASS 是最簡單的方式：
<
style lang="scss" scoped>
<
/style>
複製程式碼通過 lang 選項可以選擇使用的語法： scss/sass。如果希望樣式能夠在全域性範圍內生效，就將 scoped 刪除。
方案二：在元件中匯入 .scss 檔案
有時候我們可能想定義一個通用的 scss/sass我們可以在專案目錄中建立一個 .scss 檔案，比如一些只想在特定元件中使用的通用樣式或是一些 scss 變數等。
我們可以在元件中使用 @import 進行樣式匯入，例如：
@import '../src/static/common.scss';
複製程式碼注意路徑不要寫錯了。而且這種方案的前提是在匯入元件中使用了 方案一 。否則的話 .scss 不可能直接在普通 css 樣式表中進行編譯，需要保持樣式表格式的統一。
方案三：使用全域性 scss/sass 檔案
如果你希望定義一下全域性能夠使用的 scss 樣式，首先需要建立一個 .scss 檔案，然後在專案的 main.js 中使用 import 命令就像匯入模組一樣，將獨立 .scss 檔案全域性匯入專案。
import "./static/common.scss";
複製程式碼寫在最後，寫部落格不易，如果這篇部落格對你有用，請留下你的贊吧。你的讚賞是我最大的動力。