SCSS modules cannot load images correctly with `next-images` package

Update: Read my other comments below for a more pinpointed problem.

Bug report

Describe the bug

I tried to set a background image in a SCSS module with background: url("./footer-region-bg.jpg") repeat; (is in the same directory as the component). But this results in the following when fetching the image.

This was working with @zeit/next-sass, but it doesn’t with the native scss modules.

To Reproduce

Load an Image from the same directory as the component in an SCSS module like mentioned above. Use the native SCSS modules from NextJs.

Expected behavior

The image should be loaded correctly

System information

• OS: Windows
• Version of Next.js: 9.3.1

[theshem]

I’m not sure if it is a next-images issue or the Next.js itself.

I faced the same issue after upgrading from 9.1.7 to 9.3.1. I was using next-sass and url-loader with the custom webpack config.

By using the built-in Sass feature, background and font face url()s inside .scss files stop working. After digging into Next.js files I realized that it handles url() imports through the file-loader now.

https://github.com/zeit/next.js/blob/v9.3.1/packages/next/build/webpack/config/blocks/css/index.ts#L278-L292

https://github.com/zeit/next.js/blob/v9.3.1/packages/next/build/webpack/config/blocks/css/index.ts#L17

I hadn’t used the built-in CSS feature before and that is why I hadn’t faced the issue.

Workaround

I ended up with excluding the url() file imports by setting a test regex in webpack issuer config as follows:

// next.config.js
module.exports = {
  // ...
webpack: (config) => {
    config.module.rules.push({
      issuer: {
        // nextjs already handles url() in css/sass/scss files
        test: /\.\w+(?<!(s?c|sa)ss)$/i,
      },
      test: /\.(jpg|gif|png|svg|ico)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            // sample options
            limit: 8192,
            outputPath: '...',
            context: 'src',
            name: '[path][name].[hash:8].[ext]',
            publicPath: `your/public/path`,
          },
        },
      ],
    });

    return config;
  },
  // ...
};

Hope this helps.

[orxanaliyev]

Solved!

style.module.scss

.Home-Page-Header {
  border: 1px solid red;
  background-image: url("/static/images/header.jpg");
}

next.config.js

module.exports = {

  webpack: (config) => {
    config.module.rules.push({
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: "url-loader",
          options: {
            limit: 8192,
          },
        },
      ],
    });

    return config;
  },

};