scss styles background image parse error

Hi, thanks for your work at first

Describe the bug

After upgrading to 2.5.6, next build errors with:

Failed to compile.

./app/components/FileLoader/styles.scss
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)


> Build error occurred
Error: > Build failed because of webpack errors

System information

• System macOS Catalina 10.15.3
• node 12.8.0
• npm 6.10.3
• next 9.3.3
• next-optimized-images 2.5.6

Additional context

with next-optimized-images 2.5.5 everything ok, an error occurs in styles files with background images

[cyrilwanner]

Hi @xeniajensen This is a slightly different issue and has to do with the dynamic require.

When using a dynamic require, webpack applies the loaders on all files that could match this require. Because at build time, it does not know which images will be used later. So when you use ../public/images/${imgName}, it applies the loaders to all images within that folder, regardless of their extension since webpack does not know which extensions the imgName variable can have.

I think there are two solutions:

• If all the images in imgName have the same extension, you could move the extension out of the variable: require(`../public/images/${imgName}.jpg?...`)
• You can create multiple directories and move the images into subdirectories. E.g. move all svg files into a icons directory, background images into backgrounds, thumbnails, etc… This also has the advantage, that your query will only get applied on the images you need it to be applied and not just on all you have (regardless if they are really used in this size or not).

You can read more about it here: https://webpack.js.org/guides/dependency-management/#require-with-expression

[cyrilwanner]

I’m very sorry that this version broke your builds. I just published v2.5.7 which should hopefully fix them again. Can you please verify that?

Also, if you are already on nextjs 9.3, you might want to consider switching to the builtin sass solution which got introduced in 9.3 so you wouldn’t need the @zeit/next-sass plugin anymore.