Nuxt 3项目构建后FormKit与vue-toastification样式丢失求助

1. 显式引入vue-toastification样式 #

你的nuxt.config.ts中未添加vue-toastification的样式文件，生产构建时不会自动打包这部分样式。修改css数组，加入插件样式：

css: [
  "~/assets/fonts/droidkufi/droidarabickufi.css",
  "@formkit/themes/genesis",
  "vue-toastification/dist/index.css" // 新增这一行
],

2. 修复Tailwind CSS的内容扫描范围 #

Tailwind在生产构建时会清理未被检测到的样式，如果插件组件不在扫描范围内，会被误删。在tailwind.config.js中扩展content配置，包含插件的文件路径：

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    // 加入FormKit和vue-toastification的路径
    "./node_modules/@formkit/themes/dist/genesis/**/*.{js,ts,css}",
    "./node_modules/vue-toastification/dist/**/*.{js,ts,css}"
  ],
  // 其他Tailwind配置...
}

3. 确认FormKit主题配置 #

虽然你已经引入了Genesis主题，但可以通过创建formkit.config.ts文件确保主题正确加载（放在项目根目录）：

import { genesisIcons } from '@formkit/icons'
import { defaultConfig } from '@formkit/vue'
import { genesisTheme } from '@formkit/themes'

export default defaultConfig({
  icons: genesisIcons,
  config: {
    classes: genesisTheme
  }
})

Nuxt 3会自动识别这个配置文件，确保生产构建时主题样式被正确注入。

4. 调整样式加载顺序 #

如果存在样式冲突，尝试调整css数组的顺序，将插件样式放在自定义样式之前，避免被覆盖：

css: [
  "@formkit/themes/genesis",
  "vue-toastification/dist/index.css",
  "~/assets/fonts/droidkufi/droidarabickufi.css"
],

完成以上修改后，重新执行npm run build即可验证样式是否恢复正常。

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