在 vue-cli v3.0 中使用 SCSS/SASS的方法
在項目中使用 SCSS/SASS 進行樣式編寫無疑會節(jié)省很多開發(fā)樣式的時間。關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS，這里提供三種方案。前提是在使用 vue-cli 生成項目時勾選了 CSS Pre-processors (CSS預(yù)處理器)，否則無法在項目中直接使用。
方案一：在組件中直接使用
在組件中直接使用 SCSS/SASS 是最簡單的方式：
<style lang="scss" scoped> </style>
通過 lang 選項可以選擇使用的語法： scss/sass。如果希望樣式能夠在全局范圍內(nèi)生效，就將 scoped 刪除。
方案二：在組件中導(dǎo)入 .scss 文件
有時候我們可能想定義一個通用的 scss/sass
我們可以在項目目錄中創(chuàng)建一個 .scss 文件，比如一些只想在特定組件中使用的通用樣式或是一些 scss 變量等。
我們可以在組件中使用 @import 進行樣式導(dǎo)入，例如：
@import '../src/static/common.scss';
注意路徑不要寫錯了。而且這種方案的前提是在導(dǎo)入組件中使用了 方案一 。否則的話 .scss 不可能直接在普通 css 樣式表中進行編譯，需要保持樣式表格式的統(tǒng)一。
方案三：使用全局 scss/sass 文件
如果你希望定義一下全局能夠使用的 scss 樣式，首先需要創(chuàng)建一個 .scss 文件，然后在項目的 main.js 中使用 import 命令就像導(dǎo)入模塊一樣，將獨立 .scss 文件全局導(dǎo)入項目。
import "./static/common.scss";
總結(jié)
以上所述是小編給大家介紹的在 vue-cli v3.0 中使用 SCSS/SASS的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
上傳文件，基本上用了input框就可以解決，但大文件應(yīng)該怎樣上傳呢，一次性上傳明顯不現(xiàn)實，因為每次一斷網(wǎng)，那就會從頭開始上傳，所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會丟失，同時優(yōu)化上傳保障機制，本文就來給大家講講如何上傳大文件2023-07-07
Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)
這篇文章主要介紹了Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
vue2 router 動態(tài)傳參,多個參數(shù)的實例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個參數(shù)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽或點擊上傳圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了解決vue中使用proxy配置不同端口和ip接口問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下2017-11-11