How do I load CSS from node_modules dynamically in Nuxt 3?

Question

I am trying it like this:

loadFont(font: Font) {
      if (state.fontsToLoad.includes(font)) return

      switch (font) {
        case "poppins": {
          import("@fontsource/poppins/index.css")
          import("@fontsource/poppins/400.css")
          import("@fontsource/poppins/700.css")
          break
        }
        case "open-sans": {
          import("@fontsource/open-sans/index.css")
          import("@fontsource/open-sans/400.css")
          import("@fontsource/open-sans/700.css")
          break
        }
      }

      state.fontsToLoad = [...state.fontsToLoad, font]
    },

However, I am getting this error during build:

RollupError: Could not resolve "./index-a2b4a967.js" from "main/.nuxt/dist/server/_nuxt/<page-file-name>_-7b65df38.js"


undefined

 at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:17935:24)
  at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/node-entry.js:17995:58)
  at async node_modules/rollup/dist/es/shared/node-entry.js:17880:3