Nuxt•3w ago

css 文件是内联样式，如何改成外链样式？

2 Replies

Hi @xuxchao. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 在 Nuxt 4 中，默认情况下只有组件内的样式会被内联（inline），全局 CSS 文件会作为外链（link）引入。如果你发现全局 CSS 被内联了，可以通过配置来调整为外链方式。 解决方法： 在 nuxt.config.ts 中设置 features.inlineStyles 为 false，这样全局 CSS 就会以外链方式引入：

export default defineNuxtConfig({
  features: {
    inlineStyles: false
  }
})

export default defineNuxtConfig({
  features: {
    inlineStyles: false
  }
})

这样配置后，Nuxt 只会对组件内的样式进行内联，全局 CSS 会生成外链 <link> 标签，浏览器会单独请求这些 CSS 文件，便于缓存和优化加载速度。 背景说明： - Nuxt 4 之前，所有 CSS（包括全局 CSS）默认都会被内联，导致 HTML 文件很大。 - Nuxt 4 之后，默认只内联组件样式，全局 CSS 变为外链。如果你手动设置了 inlineStyles: true，则会恢复为全部内联。 - 你可以根据项目需求灵活配置，推荐使用外链方式以便浏览器缓存和优化性能。参考：More Granular Inline Styles ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@491180576943112192> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

css 文件是内联样式，如何改成外链样式？

Did you find this page helpful?