Nuxt3 解决出现两份css样式问题

木灵鱼儿 2024-06-26 10:01 6485 阅读3分钟

前言

最近才发现，nuxt3项目打包后会产生两份css内容，一份是内联样式，一份是css文件样式，最终是css文件样式覆盖了内联，但是这两份样式是一模一样的，而且都是vue组件才会有这种情况，让人不得不怀疑是不是打包出现问题了。

事实上也并非如此，这是nuxt3的一个特性，且仅在使用vite的时候才会有，这个特性就是inlineStyles内联样式，这样html可以很快的渲染出东西，大概是这样一个意思。

如果你不需要，或者部分组件不需要，可以通过配置进行修改。

教程

此处内容已隐藏回复后方可阅读。

分类： nuxt 标签：样式 Nuxt3

版权申明

本文系作者 @木灵鱼儿原创发布在木灵鱼儿站点。未经许可，禁止转载。

（⌒▽⌒）

( ゜- ゜)つロ_(:з」∠)_（⌒▽⌒）（￣▽￣）⌓‿⌓(=・ω・=)(*°▽°*)八(*°▽°*)♪✿ヽ(°▽°)ノ✿(¦3【▓▓】눈_눈(ಡωಡ)_(≧∇≦」∠)_━━━∑(ﾟ□ﾟ*川━(｀・ω・´)(￣3￣)✧(≖ ◡ ≖✿)(･∀･)(〜￣△￣)〜→_→(°∀°)ﾉ╮(￣▽￣)╭( ´_ゝ｀)←_←(;¬_¬)(ﾟДﾟ≡ﾟдﾟ)!?( ´･･)ﾉ(._.`)Σ(ﾟдﾟ;)Σ( ￣□￣||)<(´；ω；`)（/TДT)/(^・ω・^)(｡･ω･｡)(●￣(ｴ)￣●)ε=ε=(ノ≧∇≦)ノ(´･_･`)(-_-#)（￣へ￣）(￣ε(#￣) Σ(╯°口°)╯(┴—┴ヽ(`Д´)ﾉ("▔□▔)/(º﹃º )(๑>؂<๑）｡ﾟ(ﾟ´Д｀)ﾟ｡(∂ω∂)(┯_┯)(・ω< )★( ๑ˊ•̥▵•)੭₎₎¥ㄟ(´･ᴗ･`)ノ¥Σ_(꒪ཀ꒪」∠)_٩(๛ ˘ ³˘)۶❤(๑‾᷅^‾᷅๑)

全部评论 18

GBXIN
Google Chrome Android

1月前

帅！！！！！

回复
初学者
Google Chrome Windows 10

2月前

学习学习学习

回复
mcdj26
Google Chrome Windows 10

5月前

正好在学webpack，发现我自己用nuxt做的主页出现了这个问题，然后去看了一圈，发现这个问题没那么简单，github上一众大佬束手无策（https://github.com/nuxt/nuxt/issues/21821），最后好像是有一个插件搞定了（https://github.com/johannschopplich/nuxt-vitalizer）

回复