extractStyle开启后有办法不让css直接显示在源码中，而是分隔成css文件吗

[tinystorm]

RT

[astrO1]

This extractStyle is very laggy on development mode, this is only for production?

Making something with this

<NuxtLayout>
  <NuxtPage />
</NuxtLayout>

?

[robertyclin]

我看antdv官网有SSR 静态样式导出教程，为什么这里不导出文件呢？

[11003]

我也有这个疑问

[markthree]

@astrO1 @robertyclin @tinystorm @11003

可以试试加一个 nuxt-style-extractor 模块

[tinystorm]

@astrO1 @robertyclin @tinystorm @11003

可以试试加一个 nuxt-style-extractor 模块

感谢，可用！

[codingcn]

@astrO1 @robertyclin @tinystorm @11003

可以试试加一个 nuxt-style-extractor 模块

这个模块存在样式class优先级的问题：

1. 多个style被写入到一个css文件
2. css的加载顺序被改变了，导致样式class优先级错乱，最终build跟dev环境样式不一致

[markthree]

@codingcn 可能是压缩或者移除未使用的问题，尝试关闭。具体可看配置 nuxt-style-extractor/blob/main/README_CN.md#配置。也欢迎 pr

[markthree]

@codingcn 已支持保持原样输出，具体可见配置 → nuxt-style-extractor/blob/main/README_CN.md#保持原有状态

[codingcn]

@codingcn 已支持保持原样输出，具体可见配置 → nuxt-style-extractor/blob/main/README_CN.md#保持原有状态

测试了下，的确可以了，感谢哈

[fanxiaodan-ra]

请问生产环境如何配置nuxt-style-extractor呢

[markthree]

@fanxiaodan-ra 参考文档安装配置 → nuxt-style-extractor文档，然后重新打包部署

[fanxiaodan-ra]

感谢回复，我是配置了nuxt-style-extractor模块，本地运行的时候在.nuxt 下面生成了/cache/_css/xxx.css这种哈希命名的css文件，且浏览器样式完好，无闪烁，但是在部署之后，确切的说是build之后，.output下没有相关文件夹生成，在浏览器访问了在线路由之后，服务器上也没有相关的cache文件，所以，想请教一下，是否有遇到过相关场景，感谢感谢ღ( ´･ᴗ･` )

[markthree]

@fanxiaodan-ra

nuxt-style-extractor 在 ssr 的生产环境下 css 块默认保存在内存中，而非生成 css 文件。

这是设计上的权衡，一方面在生成环境下内存读取更快；另一方面是有为了让它能跑在 serverless 型的 js runtime 中，而大多数 serverless 是无法进行文件写入的。

当然如果你不喜欢，也可以通过 nitro 的配置进行 unstorage 的驱动调整

export default defineNuxtConfig({
  modules: [
    "nuxt-style-extractor",
  ],
  nitro: {
    storage: {
      "cache:_css": {
        driver: "fsLite", // 调整 unStorage 驱动为文件写入
        base: "./.cache/_css", // 要保存缓存的路径
      },
    },
  },
});

[fanxiaodan-ra]

@markthree

nuxt-style-extractor 在 ssr 的生产环境下 css 块默认保存在内存中，而非生成 css 文件。

这是设计上的权衡，一方面在生成环境下内存读取更快；另一方面是有为了让它能跑在 serverless 型的 js runtime 中，而大多数 serverless 是无法进行文件写入的。

当然如果你不喜欢，也可以通过 nitro 的配置进行 unstorage 的驱动调整

export default defineNuxtConfig({ modules: [ "nuxt-style-extractor", ], nitro: { storage: { "cache:_css": { driver: "fsLite", // 调整 unStorage 驱动为文件写入 base: "./.cache/_css", // 要保存缓存的路径 }, }, }, });

感谢回复~ 如果想继续使用内存中的css块，请问我如何将我生产环境的匹配到对应的内存块呢，需要加 server 路由，把_css/xxx.css 请求转到 useStorage吗，因为现在生成的这个link对应的文件其实是404的

[markthree]

@fanxiaodan-ra

默认不需要任何处理，模块内部已经是做了所有工作。

未复现你说的情况，如果有 bug 请去 nuxt-style-extractor/issues 下开一个 issue 同时带上能最小复现的仓库链接。

另外 css 是基于服务端渲染的页面生成的，如果从未访问过对应页面，而直接访问对应页面的 css 也会是 404。