Import through SASS URL does not work

[minvs1]

Hey!

It seems #139 does not work anymore.

background-image: url("../images/foo.png") produces background-image: url(/_next/static/media/foo.726e2e59f6a1cfa166389ffe7a6410cd.png);.

Content of that file is:

module.exports = "/_next/static/images/foo-12d36cacee9c32b1e682cf2a02894e1e.png";

And file /_next/static/images/foo-12d36cacee9c32b1e682cf2a02894e1e.png does exist and is correct.

The reproduced issue here: https://github.com/minvs1/nextjs-sass-image-bug

[cyrilwanner]

Thank you for the report and a reproduction repository! It looks like Next.js 9.5 broke it but I just published a patch (2.6.2) which should solve the problem again. Can you try it again with the new version? Thanks!

[minvs1]

That was fast - works perfectly! Thanks!

[chrisLoPresti]

This problem is back :(

[jamesrwaugh]

Yeah, looks like this is occurring again.
For anyone having this issue, I downgraded Next.JS (to a pre-regex-change version) following #247 and it resolved the issue for now.

[hyunchulkwak]

Thanks to @jamesrwaugh, downgrading nextjs to v10.2.0 is a workaround for the moment.

[Alecell]

I've downgraded to 10.2.0 and the issue still persist, is there another solution?

[yuuk]

I've downgraded to 10.2.0 and the issue still persist, is there another solution?

Same here...

"next": "^10.2.3"
"next-optimized-images": "^2.6.2"

The file path in css is /_next/static/media/checked-circle.5cdf80858785e958beff99909de2db49.svg

Notice that the file path include a 'media' path name.

The generated file content is:
module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwLjUiIGZpbGw9IiMwMDAiLz4KICAgIDxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTAuNDgyIDE1LjQ3TDE2LjggOC42TTcuNCAxMmwzLjA4MiAzLjQ3Ii8+Cjwvc3ZnPgo="

[hyunchulkwak]

Refer #247, adding webpack config to next.config.js worked with next v11.1.

module.exports = withOptimizedImages({
  webpack: (config, { isServer }) => {
    // https://github.com/cyrilwanner/next-optimized-images/issues/177
    // https://github.com/cyrilwanner/next-optimized-images/pull/247
    if (!isServer) {
      config.module.rules.forEach((rule) => {
        if (rule.oneOf) {
          rule.oneOf.forEach((subRule) => {
            if (
              subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
              && subRule.use && subRule.use.options && subRule.use.options.name
            ) {
              if (
                String(subRule.issuer) === '/\\.(css|scss|sass)(\\.webpack\\[javascript\\/auto\\])?$/'
                && subRule.use.options.name.startsWith('static/media/')
              ) {
                subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
              }
            }
          });
        }
      });
    }

    return config;
  },
});

FYI, @jamesrwaugh @Alecell @yuuk @lailsonbm