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樣式函數等，如下）的scss的樣式文件，單單在main.js中引用是無法生效的
// 顏色定義規(guī)范
$color-background: #222;
$color-background-d: rgba(0, 0, 0, 0.3);
// mixin函數
@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.js $refs和$emit 父子組件交互的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
在vue中使用export?default導出的class類方式
這篇文章主要介紹了在vue中使用export?default導出的class類方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue一直自動換行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+element下日期組件momentjs轉換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉換賦值問題,記錄下使用momentjs轉換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下2024-02-02
有很多關于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網絡數據請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關于axios中post請求json和application/x-www-form-urlencoded的相關資料,需要的朋友可以參考下2022-10-10
vue中的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如何構建功能完善的前端架子，本文整合出具備基礎功能的前端架子，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue列表循環(huán)從指定下標開始的多種方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04