I did. That was actually the path that led me to look into loaders. By ‘variations’ above, I meant I tried all reasonable versions of ../ and ../.. and ../../.. and so on
The error message for the sake of all the information:
Module parse failed: /home/jackson/dev/fcc-recipe-react/public/bg-img.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 6:125-159
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
I recently had used this in scss and it worked fine for me
my compiled css file was however in the same folder as my scss file, i cant see where your compiled css file is at and how your index.html file is pointing to it at, other than that dont see what the problem is , you can look at my file structure
Hi @JacksonBates ,
Would you mind sharing how did you set up the background Image. What changes did you make?So I have my webpack correctly configured , however I am unable to set a background Image to my header component.
I had the same problem recently and fixed it by setting url-loader for jpg, png, gif or whatever other format you’re using, then setting relative path to the image in your css/scss like you would usually do and then restarting webpack as Jackson mentioned.
So let me see if I get this right, in order to set image as background in scss files using Webpack, I have to change Webpack configuration? Otherwise I have to use inline styles directly in the component?