How to work with static assets like fonts, images without to reference them?

[StarpTech]

Hi, how it is possible to import dynamic content like fonts or images which aren't references in code?

😯 Current Behavior

import "font-awesome/fonts/specific.ttf" // returns a single url
import "font-awesome/fonts/specific.woff"
import "font-awesome/fonts/specific.eot"
....

💁 Possible Solution

import "font-awesome/fonts/*" // returns an array of url's

babel-plugin-wildcard

🔦 Context

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.

🌍 Your Environment

Software	Version(s)
Parcel	1.2.0
Node	8.9
npm/Yarn	npm
Operating System	Windows 10

[chee]

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)

[brandon93s]

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.

[Munter]

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

[StarpTech]

@chee I try it again and it works now. Very curious could be an issue with the cache.

[StarpTech]

But parcel is not able to watch for newly created directories.

[shunia]

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?

[willwull]

Having the same issue as @shunia, any update on this? Ended up doing a eslint-disable-line on that import for now.

[kaw2k]

using require bypasses the perceived error in vscode

[jtenner]

Testing out GlobAsset works awesome. Whoever worked on this, thank you many times over.

[mohsen1]

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/**"

[DeMoorJasper]

Parcel does already support globs and watch/invalidate them properly

[zanona]

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! 😉
Parcel v2.0.0-alpha.3.2

[mischnic]

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}">`;