Skip to content

Custom css file cannot read png and svg files #2245

Description

@prma85

🐛 Bug Report

Webpack cannot pass PNG and SVG files when they are called inside of a CSS file

To Reproduce

(Write your steps here:)

  1. Create a folder src/img and add any svg file or png file
  2. Open your custom css files defined in the docusaurus.config.js --> presets --> @docusaurus/preset-classic --> theme --> customCss
  3. Add the image as background to any class

Expected behavior

The image will show up

Actual Behavior

Getting different errors for each file where webpack cannot load the filetype.

For PNG

./src/css/custom.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

For SVG

./src/css/custom.css
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg aria-hidden="true" data-prefix="fab" data-icon="github"
(...)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions