joshuawootonn
commented
1 year ago Seeing this as well!
Open moklick opened 1 year ago
joshuawootonn
commented
1 year ago Seeing this as well!
Gyyi
commented
1 year ago the same question
danilowoz
commented
1 year ago Sorry for the delay! I have added your feature request to our internal backlog which we use to prioritize what to build next. We can't make any promises about the timing, but it's on the list!
For others landing on this issue, feel free to add more context or simply leave a thumbs up 👍 on this comment if you find this feature useful.
morganfeeney
commented
1 year ago I was expecting the external resources to automagically appear with the Code Sandbox instance too. I'm trying to avoid littering my html static templates with links to css files, e.g, if I have a generic reset file that I don't want to reference numerous times, but it's convenient.
I was expecting that if I make use of the externalResources option, like so:
<Sandpack
template="static"
theme={sandboxTheme}
files={files}
options={{
externalResources: ["/reset.css"],
}}
/>I then won't have to also include it in the <head> of a static template like this for it to appear in the code Sandpack instance:
<head>
<link rel="stylesheet" href="/reset.css" />
<link rel="stylesheet" href="/styles.css" />
</head>To add further context, when I visit: https://sandpack.codesandbox.io/docs/getting-started/usage#static-external-resources and click on the "Open Sandbox" button, I expect to see the same thing in Code Sandbox that is seen in the Sandpack instance. It's quite disjointed.
This is what it looks like in the Sandpack docs:
VS what it looks like in Code Sandbox:
By the way, I love Sandpack so far, thanks!
jaukia
commented
12 months ago This is still broken and can be seen even by clicking on the "Open Sandbox" on the official docs with the Tailwind example: https://sandpack.codesandbox.io/docs/getting-started/usage#static-external-resources
Any plans for fixing this, or are there any workarounds for Tailwind + Sandpack?
What is strange is that Codesandbox has an external resource field, that just stays empty, so one would think that this would be a simple bug that should be straight-forward to fix.
jaukia
commented
10 months ago Found a workaround for Tailwind for now, I add both a custom "public/index.html" with Tailwind loaded in a script tag, as well as externalResources: ['https://cdn.tailwindcss.com']. The first one works on Codesandbox and the second one in Sandpack. Quite hacky but does the job for now.
samselikoff
commented
1 month ago @jaukia thanks for the solution! For anyone else looking for this here's what it looks like:
<Sandpack
options={{
externalResources: [
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
],
}}
files={{
"App.tsx": myCode,
"/public/index.html": `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>`,
}}
template="react-ts"
/>
Bug report
Not sure if this is a bug or expected behaviour but when I add stuff to
externalResources, it's not included in the newly created codesandbox when using the "Open in Codesandbox" button.Packages affected
Description of the problem
externalResourcesnot included in codesandbox when using the "Open in Codesandbox" button.What were you doing when the problem occurred?
Clicked the "Open in Codesandbox" button
What steps can we take to reproduce the problem?
Add:
to you your customSetup options and use the "Open in Codesandbox" button. You will see that https://cdn.tailwindcss.com is not included in the head.
On our website, everything works great: https://reactflow.dev/docs/examples/styling/tailwind/ but when you use the "Open in Codesandbox" button, it is broken.