vue使用@include或@mixin報錯的問題及解決
更新時間：2024年02月08日 16:12:10 作者：草率了小伙
這篇文章主要介紹了vue使用@include或@mixin報錯的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用@include或@mixin報錯解決
vue樣式使用
div{
@include transition();
&:hover{
@include translateY(-10px)
}
}報錯解決方法
1.項目根目錄下新建一個vue.config.js文件
里面寫入
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)常會見到@mixin與@include。
其中：
- @mixin允許定義一個可以在整個樣式表中重復(fù)使用的樣式
- @include就是將我們定義的mixin引入到文檔中
定義一個mixin
@mixin my-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
使用mixin
使用上面定義的那個mixin， selector是當(dāng)前的選擇器
selector {
@include my-text;
}
傳遞變量
/* 混入接收兩個參數(shù) */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // 調(diào)用混入，并傳遞兩個參數(shù)
}
.myNotes {
@include bordered(red, 2px); // 調(diào)用混入，并傳遞兩個參數(shù)
}
如何引入mixin
上面的講解都是如何定義以及使用mixin。
一般常見的方式是，要創(chuàng)建一個mixin.sass文件，在其中寫上定義的mixin。
但是對于我們需要在其他的vue的style標簽中去使用這個mixin時，怎么去引入的呢？ 難道是用import mixin.sass嗎？
其實我們需要在vue.config.js 中引入即可。
css: {
loaderOptions: {
sass: {
// 全局引入變量和 mixin
additionalData: `
@import "@/assets/scss/variable.scss";
@import "@/assets/scss/mixin.scss";
`
}
}
},
只針對sass-loader去進行引入：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2+Elementui?Dialog實現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細介紹一下Vue2如何結(jié)合Elementui?Dialog實現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12
本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)多級側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue中$emit傳遞多個參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個參(arguments和$event)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue的webcamjs集成方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面加載動畫效果，vue頁面出現(xiàn)正在加載的初始頁面與實現(xiàn)動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼
這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04
本文主要介紹了vue中使用scrollTo無效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁滾動到指定位置，本文就來解決一下，具有一定的 參考價值，感興趣的可以了解一下2023-08-08