vue全局引入scss樣式文件的過程記錄
更新時(shí)間：2022年11月14日 15:32:56 作者：KILIG_yss
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時(shí)候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(guān)于vue全局引入scss樣式文件的相關(guān)資料,需要的朋友可以參考下
在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中引用是無法生效的
// 顏色定義規(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";
`
}
}
}
}與此同時(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中關(guān)于異步請(qǐng)求數(shù)據(jù)未更新的解決
本文將探討Vue中異步請(qǐng)求數(shù)據(jù)未更新的常見原因,并提供解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了vue 中自定義指令改變data中的值,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
Vue.js是一個(gè)流行的前端JavaScript框架,用于構(gòu)建用戶界面和單頁應(yīng)用,這篇文章主要給大家介紹了關(guān)于VUE3常見面試題總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue使用wavesurfer.js實(shí)現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個(gè)開源的音頻可視化庫,用于創(chuàng)建交互式、可定制的波形,本文將為大家簡(jiǎn)單介紹了Vue如何使用wavesurfer.js實(shí)現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
vuex是一個(gè)專門為vue開發(fā)的狀態(tài)管理工具,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04