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

Created on 17 Dec 2017  路  13Comments  路  Source: parcel-bundler/parcel

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

Question

Most helpful comment

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)

All 13 comments

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:

image

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

image

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}">`;
Was this page helpful?
0 / 5 - 0 ratings