Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Issues with SCSS modules after Upgrading Next.js

14 replies
Last updated: Oct 29, 2021
Anyone upgrade to Nextjs 12, and have issues with SCSS modules? I have an image that’s set on en element background, and it’s not there at all
Oct 27, 2021, 7:13 PM
.header {
    background-image: radial-gradient(
            to top left,
            rgba(150, 55, 226, 1) 0%,
            rgba(150, 55, 226, 0) 100%
        ),
        radial-gradient(
            to bottom right,
            rgba(0, 146, 255, 1) 0%,
            rgba(0, 146, 255, 0) 100%
        ),
        linear-gradient(rgba(16, 19, 68, 0), rgba(16, 19, 68, 0.5)),
        url('../images/hero.jpg');   <<<<<<===== This!
Oct 27, 2021, 7:13 PM
locally I see CSS like this (next 12)
Oct 27, 2021, 7:14 PM
next 11 I have this
Oct 27, 2021, 7:14 PM
same result with the new 
swcMinify
option on or off, or with a 
.babelrc
file in place (which supposedly uses the old build pipeline)
Oct 27, 2021, 7:15 PM
would also be open to doing this some other way.. if such a thing exists for a background image
Oct 27, 2021, 7:16 PM
i think if you take out the 
..
it should work, assuming it’s public/images/hero.jpg
Oct 27, 2021, 10:16 PM
thanks! well that’s bizarre, the color blur is now there, but still no image…??? The file resides at 
src/images/hero.jpg
in my site
Oct 28, 2021, 9:02 PM
intended (has some words behind the blur there, and v12 (just the color gradient)
Oct 28, 2021, 9:03 PM
basically a 404 on the image but at least the CSS isn’t broken
Oct 28, 2021, 9:04 PM
is there a different way to reference a raw image in SCSS modules with Next that’s different than it used to be?
Oct 28, 2021, 9:04 PM
i would put the image in 
/public
Oct 28, 2021, 9:13 PM
I have an svg actually using the same method, why would this work but not the other one? I’d prefer to understand why old ways of doing things jsut stop working in v12 before I restructure my site
Oct 29, 2021, 1:13 PM
in fact, I can put hero.jpg in where the iphone one is and it works, it’s purely about this particular element that’s not working!
Oct 29, 2021, 1:18 PM
This is something with autoprefixer no longer prefixing the 
radial-gradient
with 
-webkit-
and generating CSS that nothing thinks is valid.. if I pull my old generated CSS with that prefix in it, things work… wtf?
Oct 29, 2021, 3:18 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?