如何在 vue-cli v3.0 中使用 SCSS/SASS

在項目中使用 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";
複製代碼

寫在最後，寫博客不易，若是這篇博客對你有用，請留下你的贊吧。你的讚揚是我最大的動力。