生活随笔
收集整理的這篇文章主要介紹了
scoped 样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、加不加 scoped ？
加上之后，讓樣式在局部生效，防止沖突
<style lang="less" scoped>
#bg-red {background-color: #f00;
}
</style>
不加，相當(dāng)于是定義的全局樣式，每個(gè)組件都可以訪問(wèn)你定義的樣式在 App.vue 的樣式屬性中就沒(méi)有 scoped ，因?yàn)槊總€(gè)組件都要匯總到 App.vue 中，每個(gè)組件都可以訪問(wèn) App.vue 上定的類樣式
<style lang="less">
.bg-yellow {color: #f00;background-color: #ff0;
}
</style>
解決 vue 使用 less 版本問(wèn)題
npm view less-loader versions 查看 less-loader 的歷史版本
npm i less-loader@7 -- 安裝 less-loader 7 版本
vue 使用的是 wabpack 4.46， less 7.x.x 支持； 而 less 9.x.x 是支持 webpack 5 的，所以要降版本使用
樣式屬性沒(méi)有指出語(yǔ)言 – lang=“xxx” 默認(rèn)就是 css
總結(jié)
以上是生活随笔為你收集整理的scoped 样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
