Skip to content

Images in CSS are not present in manifest but present as versioned files in the production build #8640

Closed
@Experiment8

Description

@Experiment8

Describe the bug

When importing a third party CSS the images/files are correctly extracted and versioned during production build, but they're not declared in the manifest.

Steps to reproduce

  1. Create a plain new CRA project;
  2. Add for E.g semantic UI dependency (yarn add semantic-ui-css);
  3. Add the import in the index.js:
import 'semantic-ui-css/semantic.min.css';
  1. Run yarn build;

Expected behavior

Taking for instance the image themes/default/assets/images/flags.png present in the CSS, I would expect it to be in build/static/media/flags.<hash>.png and the reference to be in the manifest.

Actual behavior

The image file with the hash is created:

image

But the manifest has no trace of it, and actually the entire semantic CSS file is considered as a font file for some reason:

{
  "files": {
    "main.css": "/static/css/main.d1b05096.chunk.css",
    "main.js": "/static/js/main.8ef6347a.chunk.js",
    "main.js.map": "/static/js/main.8ef6347a.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.a572b363.js",
    "runtime-main.js.map": "/static/js/runtime-main.a572b363.js.map",
    "static/css/2.0252c3bb.chunk.css": "/static/css/2.0252c3bb.chunk.css",
    "static/js/2.ff88bdeb.chunk.js": "/static/js/2.ff88bdeb.chunk.js",
    "static/js/2.ff88bdeb.chunk.js.map": "/static/js/2.ff88bdeb.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.c5fae06b3368a7ffe489fd22aa8bdfae.js": "/precache-manifest.c5fae06b3368a7ffe489fd22aa8bdfae.js",
    "service-worker.js": "/service-worker.js",
    "static/css/2.0252c3bb.chunk.css.map": "/static/css/2.0252c3bb.chunk.css.map",
    "static/css/main.d1b05096.chunk.css.map": "/static/css/main.d1b05096.chunk.css.map",
    "static/js/2.ff88bdeb.chunk.js.LICENSE.txt": "/static/js/2.ff88bdeb.chunk.js.LICENSE.txt",
    "static/media/semantic.min.css": "/static/media/outline-icons.ef60a4f6.woff",
    "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
  },
  "entrypoints": [
    "static/js/runtime-main.a572b363.js",
    "static/css/2.0252c3bb.chunk.css",
    "static/js/2.ff88bdeb.chunk.js",
    "static/css/main.d1b05096.chunk.css",
    "static/js/main.8ef6347a.chunk.js"
  ]
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions