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