一、需求描述
升级Nuxt 3.12.4之后发现html增大,页面有大量的Style标签引入的css:
为了减少页面加载大小,需要将这些css抽取到独立的css文件中。
二、解决方案
Nuxt官网提供的有关extract css的有关配置大致有以下情况:
在nuxt.config.ts
中配置:
(1)如果用的是webpack:
webpack: {
extractCSS: true,
// or
extractCSS: {
ignoreOrder: true
}
}
详情参考《https://nuxt.com/docs/api/nuxt-config#extractcss》
(2)如果用的是vite:
最新版本的Nuxt 3.12.4:
features: {
inlineStyles: false
}
如果没有inlineStyles配置项或者inlineStyles无效,则使用:
experimental: {
inlineSSRStyles: false
}