1.2 KiB
Style Element Position
Sometimes you want to control where the style element should be inserted.
For example. If you have a tailwind reset style, you don't want it to be inserted after naive-ui's style. Since it may override button's style, etc.
You can create a <meta name="naive-ui-style" /> element inside head element, then naive-ui's style will be inserted right before it.
Also, naive-ui uses vueuc. If you need, its style can be controlled by <meta name="vueuc-style" /> (generally it's not needed).
<head>
<xxx />
<!-- naive-ui's style will be inserted here -->
<meta name="naive-ui-style" />
<!-- vueuc's style will be inserted here -->
<meta name="vueuc-style" />
<xxx />
</head>
About tailwind's style override
You may find adding a meta tag to your static html files doesn't work (naive's style would still be overriden), since your toolchain may always insert tailwind's style at the end of the head tag. In this situation, you need to insert the meta tag dynamically right before the app is mounted.
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
vueApp.mount('#app')