溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在項目中使用 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";
總結
以上所述是小編給大家介紹的在 vue-cli v3.0 中使用 SCSS/SASS的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
