v5 没法作为一个外部库在nodejs中使用

[zyw00001]

v5没法作为一个外部库在nodejs中使用(不需要将antd-mobile代码打包进nodejs运行的代码中)，原因是无论怎样包含文件都会导入css文件。之前v2版本是可以独立作为一个外部库在nodejs中运行的。v5版本为什么要强制导入css文件呢?

[awmleer]

你是在什么场景下需要在 node.js 环境中运行呢？css 的引入应该是有办法可以解决的，不然我们用 jest 做测试，不也是会引入 css 文件么

[zyw00001]

为了完成SSR，且发布服务端代码(nodejs)时，只需要将antd-mobile动态引入就行，此时不需要对antd-mobile (V2)进行任何处理就可以直接运行。而V5将CSS在库中就进行强制导入了，由于在库中导入，此时必须要处理库的代码，而不是在业务代码中进行按需导入(只需要处理业务代码)。

[awmleer]

你们的 SSR 是用的什么方案嘞？目前对 SSR 的支持还处在试验性的阶段，对 Next.js 的支持相对会好一些，可以查阅一下这篇文档：https://mobile.ant.design/zh/guide/ssr
当然原理都是大同小异的，其他 SSR 方案未来也是可以适配的

[zyw00001]

没有采用其他框架，直接用isomorphic-style-loader来处理CSS。(服务端)对于第三方库，没有打包进业务代码中，采用动态加载的方式。

[awmleer]

所以用了 isomorphic-style-loader 之后就可以在 node 环境中使用了嘛？

相关： #4255

[zyw00001]

用MiniCssExtractPlugin和 isomorphic-style-loader都可以，但是太麻烦了，不如以前使用那么简单

[zyw00001]

webpack针对nodejs的配置复杂了很多

[hold-baby]

/Users/ez/workspace/h5hub/node_modules/antd-mobile/cjs/global/global.css:1
:root {
SyntaxError: Unexpected token ':'

vite3 给的事例做 SSG 的时候也会有同样的问题 @awmleer

[awmleer]

@hold-baby SSR 或者 SSG 的话，都需要对 css 文件做一些特殊处理，具体得看不同框架提供的能力和 API

在这篇文档里有一些介绍：https://mobile.ant.design/zh/guide/ssr/

你所说的“ vite3 给的示例”可以发一下链接么

[hold-baby]

@awmleer 好，我试试
https://github.com/vitejs/vite-plugin-vue/blob/main/playground/ssr-vue/prerender.js 这是示例

[awmleer]

vue……？😅

可以试试这个：https://www.npmjs.com/package/node-css-require

[hold-baby]

和 Vue 没什么关系，道理都是一样的
我试下这个包😊

[mywei1989]

用MiniCssExtractPlugin和 isomorphic-style-loader都可以，但是太麻烦了，不如以前使用那么简单

具体的用法?
最近在开发 基于 vite-plugin-ssr 生成ssg的相关项目 目前也卡在这 看了所有相关issue 还不知道如何处理
next.js 有对应的方法 不知道 vite 有没有?

[mywei1989]

用MiniCssExtractPlugin和 isomorphic-style-loader都可以，但是太麻烦了，不如以前使用那么简单

具体的用法? 最近在开发 基于 vite-plugin-ssr 生成ssg的相关项目 目前也卡在这 看了所有相关issue 还不知道如何处理 next.js 有对应的方法 不知道 vite 有没有?

这样解决 使用 noExternal 配置项

return defineConfig({
    plugins: [
      react(),
      vitePluginImp({
        libList: [
          {
            libName: "antd-mobile",
            style: () => false,
            libDirectory: "es/components",
            replaceOldImport: true,
          }]
      }),
      ssr({
        prerender: {
          parallel: 1,
          partial: true,
        },
        includeAssetsImportedByServer: true
      })
    ],
    ssr: {
      noExternal: ['antd-mobile']  
    }
  })