vue全局引入scss樣式文件的過(guò)程記錄
在vue中全局引入非功能性的scss樣式文件很簡(jiǎn)單,只需要在main.js文件中引入對(duì)應(yīng)文件就行
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 全局引入樣式文件 import '@/assets/scss/index.scss' createApp(App).use(store).use(router).mount('#app')
但想要在vue中引入功能性(即定義的顏色規(guī)范、mixin樣式函數(shù)等,如下)的scss的樣式文件,單單在main.js中引用是無(wú)法生效的
// 顏色定義規(guī)范 $color-background: #222; $color-background-d: rgba(0, 0, 0, 0.3); // mixin函數(shù) @mixin bg-image($url) { ? background-image: url($url + "@2x.png"); ? @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) { ? ? background-image: url($url + "@3x.png"); ? } }
想要全局引入功能性的scss樣式文件,就必須在vue.config.js中寫(xiě)下如下代碼:
module.exports = { css: { loaderOptions: { sass: { // 全局引入變量和 mixin additionalData: ` @import "@/assets/scss/variable.scss"; @import "@/assets/scss/mixin.scss"; ` } } } }
與此同時(shí)要保證你的sass和sass-loader的版本較新,因?yàn)榕f版本是不支持如上操作的,sass和sass-loader的版本在package.json文件中可以更改
總結(jié)
到此這篇關(guān)于vue全局引入scss樣式文件的文章就介紹到這了,更多相關(guān)vue全局引入scss樣式文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue中使用export?default導(dǎo)出的class類方式
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問(wèn)題,需要的朋友可以參考下2024-02-02利用vue寫(xiě)todolist單頁(yè)應(yīng)用
有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12axios中post請(qǐng)求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù),相比于原生的XMLHttpRequest對(duì)象,axios簡(jiǎn)單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請(qǐng)求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10vue中的vue-router?query方式和params方式詳解
這篇文章主要介紹了vue中的vue-router?query方式和params方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08解決element-ui el-input賦值后不能編輯的問(wèn)題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子,本文整合出具備基礎(chǔ)功能的前端架子,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04