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