Hi, how it is possible to import dynamic content like fonts or images which aren't references in code?
import "font-awesome/fonts/specific.ttf" // returns a single url
import "font-awesome/fonts/specific.woff"
import "font-awesome/fonts/specific.eot"
....
import "font-awesome/fonts/*" // returns an array of url's
Importing a bunch of static assets e.g to include fonts or images which aren't directly referenced in the code e.g parcel does not interpret sass variables.
| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.2.0
| Node | 8.9
| npm/Yarn | npm
| Operating System | Windows 10
your possible solution _is_ the current behaviour, except it's an object not an array.
import fonts from 'webfonts/*'
console.log(fonts)
// >>
{
"fa-brands-400.svg": "/c93a719bd1a2bb754e1ff39dd44ce213.svg"
"fa-brands-400.ttf": "/3cbc230cc76bbe87cfe897fe010e262b.ttf"
"fa-regular-400.svg": "/0f0865fbbcff198bf977228c2a022de9.svg"
"fa-regular-400.ttf": "/93401b2e0b2c5df731d220b244ea5b5e.ttf"
}
if you want an array, you can use Object.values(fonts)
Curious why the individual fonts need importing, and not the css that leverages them?
As @chee mentioned, GlobAsset should already be handling this type of import.
Fonts should always be referenced with an @font-face
CSS declaration. If they are not, having them be a part of the build will make no difference, since the browser will not know hoe to load them anyway.
I assume that Parcel handles font loads with its url(...)
matching regex in the CSS asset, so font should be picked up by importing the @font-face
declaring CSS
@chee I try it again and it works now. Very curious could be an issue with the cache.
But parcel is not able to watch for newly created directories.
import xx from 'folder/*'
did helped a lot, as @chee pointed out, and Parcel handles this right.
But vscode shows error when editing:
Any info that I can clear this error please?
Having the same issue as @shunia, any update on this? Ended up doing a eslint-disable-line
on that import for now.
using require
bypasses the perceived error in vscode
Testing out GlobAsset works awesome. Whoever worked on this, thank you many times over.
If TypeScript is yelling at you about the module name you can create a file named declarations.d.ts
in your repo and put module declaration code in it:
declaration.d.ts
declare module "assets/**"
Parcel does already support globs and watch/invalidate them properly
I'm trying to use import iconFont from './styles/icons.woff'
, but I get:
Error: No transformers found for "/mnt/app/src/styles/icons.woff".
Help! :wink:
Parcel v2.0.0-alpha.3.2
https://parcel2-docs.now.sh/getting-started/migration/#importing-non-code-assets-from-javascript
import logo from "url:./logo.svg";
document.body.innerHTML = `<img src="${logo}">`;
Most helpful comment
your possible solution _is_ the current behaviour, except it's an object not an array.
if you want an array, you can use
Object.values(fonts)