Nuxt.js SSG模式下引入第三方Vue组件插件CSS不生效问题求解

问题根因 #

你将引入第三方组件CSS的插件设置为client仅客户端模式，Nuxt SSG静态生成阶段服务端侧不会执行客户端插件的导入逻辑，导致打包工具无法捕获到该CSS资源，最终静态产物中缺失对应样式。开发模式下客户端热更新会主动注入样式，因此dev运行正常。

可落地解决方案，按优先级选择即可： #

• 方案1：将第三方组件CSS加入全局CSS配置
  修改nuxt.config.js中的css字段：

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'features/dist/styles.css'
  ],
  

  该方案最稳妥，Nuxt在SSG构建阶段会主动将该路径下的CSS打包进全局样式文件，不受插件模式限制。

• 方案2：调整插件执行模式
  移除features插件的mode: 'client'配置，修改为通用模式：

  plugins: [
    '@/plugins/features.js',
    { src: '~/plugins/inject.js' }
  ],
  

  纯Vue插件无浏览器专属API调用的情况下可在服务端正常执行，SSG构建阶段服务端侧会触发CSS导入逻辑，打包工具可正常捕获样式资源。

• 方案3：保留客户端模式的补充配置
  如果你确实需要限制插件仅在客户端执行，可在build配置中添加transpile规则，告诉Nuxt需要处理该第三方包的资源：

  build: {
    extractCSS: true,
    followSymlinks: true,
    transpile: ['features']
  }
  

  该配置配合已开启的followSymlinks，可正确识别yarn软链的本地测试包，不会将其作为外部依赖跳过样式处理。

修改完成后重新执行npm run generate，生成的静态产物中就会包含对应组件样式。

内容的提问来源于stack exchange，提问作者wizzer711