欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue全局引入scss樣式文件的過(guò)程記錄

 更新時(shí)間:2022年11月14日 15:32:56   作者:KILIG_yss  
css文件可以直接引入到main.js中,scss文件如果沒(méi)有scss特殊語(yǔ)法也可以直接引入index.js,只有scss文件中的特殊語(yǔ)法全局引入的時(shí)候無(wú)法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(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中引用是無(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.js $refs和$emit 父子組件交互的方法

    vue.js $refs和$emit 父子組件交互的方法

    本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • 在vue中使用export?default導(dǎo)出的class類方式

    在vue中使用export?default導(dǎo)出的class類方式

    這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue一直自動(dòng)換行的問(wèn)題及解決

    vue一直自動(dòng)換行的問(wèn)題及解決

    這篇文章主要介紹了vue一直自動(dòng)換行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題解決

    vue+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)用

    利用vue寫(xiě)todolist單頁(yè)應(yīng)用

    有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • axios中post請(qǐng)求json和application/x-www-form-urlencoded詳解

    axios中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-10
  • vue中的vue-router?query方式和params方式詳解

    vue中的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)題

    這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • 詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子

    詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子

    這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子,本文整合出具備基礎(chǔ)功能的前端架子,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案

    Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案

    這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-04-04

最新評(píng)論