快捷導(dǎo)航

vue使用@include或@mixin報(bào)錯(cuò)的問(wèn)題及解決

更新時(shí)間：2024年02月08日 16:12:10 作者：草率了小伙

這篇文章主要介紹了vue使用@include或@mixin報(bào)錯(cuò)的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue使用@include或@mixin報(bào)錯(cuò)解決

vue樣式使用

div{
@include transition();
&:hover{
  @include translateY(-10px)
 }
}

報(bào)錯(cuò)解決方法

1.項(xiàng)目根目錄下新建一個(gè)vue.config.js文件

里面寫(xiě)入

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/common.scss";`
      }
    }
  }
}

2."sass-loader"版本必須在8.0版本以下，不包含8.0，最好用7.1.0版本

@mixin與@include介紹

在Sass里面，我們經(jīng)常會(huì)見(jiàn)到@mixin與@include。

其中：

@mixin允許定義一個(gè)可以在整個(gè)樣式表中重復(fù)使用的樣式
@include就是將我們定義的mixin引入到文檔中

定義一個(gè)mixin

@mixin my-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

使用mixin

使用上面定義的那個(gè)mixin， selector是當(dāng)前的選擇器

selector {
  @include my-text;
}

傳遞變量

/* 混入接收兩個(gè)參數(shù) */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 調(diào)用混入，并傳遞兩個(gè)參數(shù)
}

.myNotes {
  @include bordered(red, 2px); // 調(diào)用混入，并傳遞兩個(gè)參數(shù)
}

如何引入mixin

上面的講解都是如何定義以及使用mixin。

一般常見(jiàn)的方式是，要?jiǎng)?chuàng)建一個(gè)mixin.sass文件，在其中寫(xiě)上定義的mixin。

但是對(duì)于我們需要在其他的vue的style標(biāo)簽中去使用這個(gè)mixin時(shí)，怎么去引入的呢？難道是用import mixin.sass嗎？

其實(shí)我們需要在vue.config.js 中引入即可。

css: {
    loaderOptions: {
      sass: {
        // 全局引入變量和 mixin
        additionalData: `
          @import "@/assets/scss/variable.scss";
          @import "@/assets/scss/mixin.scss";
        `
      }
    }
  },

只針對(duì)sass-loader去進(jìn)行引入：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue2+Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫(xiě)的最多的除了列表表格之外,就是各種彈窗組件,本文就來(lái)為大家詳細(xì)介紹一下Vue2如何結(jié)合Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件,希望對(duì)大家有所幫助
2023-12-12
Vue獲取DOM元素樣式和樣式更改示例
本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue的webcamjs集成方式
這篇文章主要介紹了vue的webcamjs集成方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue中怎樣讓函數(shù)只執(zhí)行一次
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)效果，vue頁(yè)面出現(xiàn)正在加載的初始頁(yè)面與實(shí)現(xiàn)動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
這篇文章主要介紹了 Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下
2018-04-04
vue中使用scrollTo無(wú)效的解決方法
本文主要介紹了vue中使用scrollTo無(wú)效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定位置，本文就來(lái)解決一下，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-08-08