Open leodevbro opened 3 years ago
Tested like this:
1) Created React app with create-react-app in my local Windows 10 env, placed the font file in "src" folder and it works in my local env.
2) Pushed the code in my github. https://github.com/leodevbro/test010
3) Imported the github repo into Codesandbox: https://codesandbox.io/s/serverless-shadow-yi4mg?file=/src/App.css
And, the font file inside "src" folder -> does not work in Codesandbox.
.
Hey,
Thanks for the issue. We will take a look at it!
I can reproduce this.
Digging a bit into react-scripts
, this works locally because of the catch-all rule:
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
which matches whenever src/App.css
refers the font through src: url("kaushan-script-regular.ttf");
, looking up the font in src
and serving it from /static/media
:
@lbogdan,
So, what can I do if I want to import font from src
folder and not from public
folder?
@leodevbro I'm afraid you can't do anything for now. Any particular reason you want your fonts under the src
folder?
@DeMoorJasper Can we do anything about this?
@lbogdan,
Any particular reason you want your fonts under the src folder?
Well, I guess the most common reason would be when I already have a source code of a project let's say which I built 2 years ago in react. And I want to import it into codesandbox. And let's say this project works fine in local env, and it contains a lot of fonts in src folder and there are many css files which import those fonts. So, I don't want to move all the fonts from scr
folder into public
folder, because it also needs all the css files to correct import paths and maybe something will get messed up.
🐛 bug report
Preflight Checklist
Description of the problem
In react.js apps, fonts usually can be accessed in "src" folder, but Codesandbox app makes fonts accessible only in "public" folder.
How has this issue affected you? What are you trying to accomplish?
I have my project in github that I want to import to Codesandbox and run it in sandbox, and I have font files in the "src" folder, and Codesandbox does not allow me to access font files in "src", I don't want to move the font files from "src" to "public". I want my original project as it is.
To Reproduce
Link to sandbox: link (optional)
Your Environment