Importing external CSS
Hello, I’d like to use "flag-icons" package which one can import in normal React apps with:
import "node_modules/flag-icons/css/flag-icons.min.css";
But I get errors with file not found when building with Wasp — if I try to import it with "../../…..", then it builds but there’s an error in the browser that the file can’t be accessed.
What to do?6 Replies
Hey @Šlukas MacPrásk !
This might be due to our Vite config -> check out this convo https://discord.com/channels/686873244791210014/1216762336086593617/1216762336086593617 and let us know if the solution there helps or not!
It is a bit weird that you have to import it by specifying
node_modules in the path though -> what if you just do import "flag-icons/css/flag-icons.min.css", would that work?@martinsos ok, I did the following:
1. changed the import as suggested
2. added resolveProjectPath to tailwind.config.clj as in that convo (but for flag-icons)
Now it still doesn’t load — get the following error in Client logs:
“The request url "/home/…/app/node_modules/flag-icons/…" is outside of Vite serving allow list.”
It will work when I explicitly add the file path to server.fs.allow list in vite.config.ts
But I assume that’s not the correct way? I guess it should use a path from .wasp/out/webapp (but I don’t see flag-icons copied there)?
try the solution here: https://discord.com/channels/686873244791210014/1216399816750534728/1216670602749018202
Wohooo @owopi, you just became a Waspeteer level 2!
Thanks @owopi ! @Šlukas MacPrásk did that work?
@miho could you take a look here, you know Vite better than me
Thanks a lot @owopi ! Yes, @martinsos , the approach from that @miho gist worked