當(dāng)項目中同時使用到
Naive UI和Tailwindcss時，出現(xiàn)了樣式覆蓋問題，Tailwindcss樣式直接將Naive UI樣式覆蓋導(dǎo)致無法正常使用
:: 解決方案
- 方式一
在
main.js / main.ts文件中添加以下代碼，主要原理是需要在應(yīng)用初始化之前將naive-ui-style提前注入到應(yīng)用當(dāng)中，避免被覆蓋
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
...
// 初始化應(yīng)用
const init = () => {
// 添加 meta 標(biāo)簽，用于處理使用 Naive UI 和 Tailwind CSS 時的樣式覆蓋問題
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
// 創(chuàng)建應(yīng)用
createApp(App)
.use(router)
...
.mount("#app")
}
init()
- 方式二
或者，可以在
index.html根路徑下的head元素中加入一個<meta name="naive-ui-style" />元素
<html>
...
<meta name="naive-ui-style" />
...
</html>
:: 衍伸閱讀
潛在的樣式?jīng)_突文章來源：http://www.zghlxwxcb.cn/news/detail-740198.html
:: 更多內(nèi)容 ::
> 開發(fā)過程中踩坑經(jīng)驗記錄文章來源地址http://www.zghlxwxcb.cn/news/detail-740198.html
到了這里，關(guān)于解決Naive UI和Tailwindcss樣式覆蓋問題【日常記錄，可供參考】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
