Custom css file cannot read png and svg files

🐛 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"
(...)

[lex111]

1 - Is there a way in the config.js to select a different logo for when the website is dark? Or should I do it in the CSS?

This is not provided in the config file, but you can easily do it through CSS, here is an example - https://github.com/smashgg/developer-portal/blob/master/website/static/css/custom.css#L66-L65

For v1, I had a custom script for the window.addEventListener(“load”, doSomething)…

Try wrap the desired piece of code in useEffect hook.

[prma85]

1 - Is there a way in the config.js to select a different logo for when the website is dark? Or should I do it in the CSS?

This is not provided in the config file, but you can easily do it through CSS, here is an example - https://github.com/smashgg/developer-portal/blob/master/website/static/css/custom.css#L66-L65

The css doesn’t work since the logo configuration adds an img element and not the background of the link. With this code, I ended up with two images, one as background and one as the img element. The solution was to add the css to the link and a display none for the img.

You can to swizzle the DocPage component and put the necessary script there. @yangshun although there may be another option?

Doing the yarn swizzle @docusaurus/theme-classic DocPage and adding an useEffect(addFeedbackBtn, [location.pathname]); solved my issue.

Thanks for your thoughts and help. Are you all planning in added what you can swizzle in the docs?