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