Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS/SCSS relative path SVG image not loading #3964

Closed
apurvaojas opened this issue Dec 29, 2020 · 0 comments · Fixed by #3965
Closed

CSS/SCSS relative path SVG image not loading #3964

apurvaojas opened this issue Dec 29, 2020 · 0 comments · Fixed by #3965
Labels
bug An error in the Docusaurus core causing instability or issues with its execution

Comments

@apurvaojas
Copy link
Contributor

🐛 Bug Report

If you use the React/Webpack import CSS/SCSS style where CSS/SCSS files are imported into js files like import styles from "./index.module.scss"; then background images loaded by URL's fail for SVG images.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

  • Load a css file via an import into a JS file
  • Use a background-image: url('../static/img/.svg') type tag on an imported class
  • Try to load docusaurus

Expected behavior

The image should be shown in the background of Element.

Actual Behavior

The compiled CSS doesn't contain a valid image URL.

test

Your Environment

  • Docusaurus version used: 2.0.0-alpha.70
  • Chrome Version 87.0.4280.88 (Official Build) (64-bit)
  • Node v14.15.1
  • Desktop Ubuntu 20.04.1 LTS

Reproducible Demo

https://github.com/i18n-components/i18n-components/tree/main/website

https://github.com/i18n-components/i18n-components/blob/main/website/src/pages/styles.module.scss#L24
@apurvaojas apurvaojas added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Dec 29, 2020
@apurvaojas apurvaojas mentioned this issue Dec 29, 2020
Closed
apurvaojas added a commit to apurvaojas/docusaurus that referenced this issue Dec 29, 2020
@apurvaojas
bug(v2): fix svg loader for styles re facebook#3964
77eeaac
@slorber slorber mentioned this issue Dec 29, 2020
Merged
slorber added a commit that referenced this issue Dec 29, 2020
@apurvaojas @slorber
fix(v2): fix svg loader for CSS files (#3965)
5944226 
* bug(v2): fix svg loader for styles re #3964

* ensure we only use SVGR loader in source code that can use React (ie not in CSS files)

* fix test

Co-authored-by: slorber <lorber.sebastien@gmail.com>
@Josh-Cena Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Mar 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug An error in the Docusaurus core causing instability or issues with its execution
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(v2): fix svg loader for CSS files apurvaojas/docusaurus
2 participants
@apurvaojas @Josh-Cena