How do I load CSS from node_modules dynamically?
I am trying it like this:
However, I am getting this error during build:
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]
},
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]
},
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
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
0 Replies