vue使用@include或@mixin報(bào)錯(cuò)的問題及解決
更新時(shí)間：2024年02月08日 16:12:10 作者：草率了小伙
這篇文章主要介紹了vue使用@include或@mixin報(bào)錯(cuò)的問題及解決,具有很好的參考價(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文件
里面寫入
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ì)見到@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ǎng)?chuàng)建一個(gè)mixin.sass文件，在其中寫上定義的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)文章
這篇文章主要介紹了Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
vue 項(xiàng)目中常用的 2 個(gè) Ajax 庫及簡單使用示例
Ajax是一種在不重新加載整個(gè)頁面的情況下,通過 JavaScript 與服務(wù)器進(jìn)行異步通信的技術(shù),這篇文章主要介紹了vue項(xiàng)目中常用的2 個(gè) Ajax庫,需要的朋友可以參考下2025-06-06
這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
vue、react等單頁面項(xiàng)目應(yīng)該這樣子部署到服務(wù)器
這篇文章主要介紹了vue、react等單頁面項(xiàng)目應(yīng)該這樣子部署到服務(wù)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)
這篇文章主要介紹了詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了前端vue打包項(xiàng)目，如何解決跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
詳解如何使用vue和electron開發(fā)一個(gè)桌面應(yīng)用
這篇文章主要為大家介紹了詳解如何使用vue和electron開發(fā)一個(gè)桌面應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03