Custom css file cannot read png and svg files

prma85 commented 4 years ago

🐛 Bug Report

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

To Reproduce

(Write your steps here:)

Create a folder src/img and add any svg file or png file
Open your custom css files defined in the docusaurus.config.js --> presets --> @docusaurus/preset-classic --> theme --> customCss
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 commented 4 years ago

@prma85 please see this comment, images should be in static/img directory.

prma85 commented 4 years ago

Thank you @lex111 I tried to get it from static folder, but I got exactly the same error. background: url("../../static/img/github-brands.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" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="black" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 
352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 
4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
 @ ./.docusaurus/client-modules.js 1:62-148
 @ ./node_modules/@docusaurus/core/lib/client/client-lifecycles-dispatcher.js
 @ ./node_modules/@docusaurus/core/lib/client/App.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

lex111 commented 4 years ago

You specify the wrong path, it should be like this: background: url("/img/github-brands.svg");

prma85 commented 4 years ago

Oh, right, my bad. This actually worked, but I needed to add the /hub.docs/ in the URL as it is my baseURL Thank you @lex111 ;)

If you don't mind to answer two more questions, not related, I will really appreciate it. 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?

2 - For v1, I had a custom script for the window.addEventListener("load", doSomething) and it was activated every time I changed pages (docs). Now, it is loaded only in the first load and I guess this is because of the route structure. This script is to add a feedback button on all pages. Do you have any suggestions for how it could be handled now?

lex111 commented 4 years ago

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 commented 4 years ago

Try wrap the desired piece of code in useEffect hook.

I believe this doesn't work on my case since I need this script to be executed in all docs pages (MD files).

Is possible to override the react wrap page that renders the MD files?

lex111 commented 4 years ago

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

yangshun commented 4 years ago

Yeah I think swizzling is the only option for now. I have thoughts for exposing the original components under @theme-original/... so that swizzled components can still access the original component if they only want to wrap it. WDYT?

lex111 commented 4 years ago

@yangshun this is an interesting idea, although I do not really imagine how it should work.

prma85 commented 4 years ago

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?

facebook / docusaurus