prependData for sass-loader not working anymore

Bug report

Describe the bug

Inside my next.config.js file I have

sassOptions: {
            includePaths: [getAbsPath('./public/sass')],
            prependData: `$staticPath: "${staticPath}"; @import "./public/sass/settings/index.scss"; @import "./public/sass/tools/index.scss";`,
        },

this used to work on next version 9.5 but recently we upgraded to 10 version and it reports undefined Sass variables on running the project with the same configuration.

prependData was released before June - https://github.com/vercel/next.js/pull/12277

But also noticed that sass-loader removed prependData property here -> https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0

Now, next 10 is dart-sass by default.

So, how do I cope with this change in our project?

Error that I get right now is

./shared/NoInternetConnection.module.scss
SassError: Undefined variable.

System information

• OS: macOs
• Version of Next.js: [e.g. 10.0.3]
• Version of Node.js: [e.g. 10.19.0]
• Deployment: next start
• sass version - tested on 1.29.0 and 1.26.10

Additional context

Should you need any more information, please let me know in case I missed anything. Apart from sass, there is no other dependencies installed. Assuming next.js automatically handles sass-loader configuration. Also, I tried additionalData but in vain considering the fact that sass-loader has removed prependData. I believe the support is needed for additionalData now.

I am running custom express server to render this configuration.

server.js

const next = require('next');
const express = require('express');
const nextConfig = require('./next.config');

const isDev = process.env.NODE_ENV !== 'production';
// const nextConfig = getNextConfig({}, !isDev);
const app = next({ dev: isDev, conf: nextConfig});
const handle = app.getRequestHandler();
const port = process.env.PORT || 3005;

app.prepare().then(() => {
    const server = express();
    server.all('*', (req, res) => {
      return handle(req, res);
    });
    server.listen(port, (err) => {
      if(err) throw err;
      console.log(`> Ready on localhost: ${port} - env ${process.env.NODE_ENV}`)
    });
});

NoInternetConnection.module.scss

.container {
...
    background: $white;
...
...
}

[marcvangend]

For anyone who (like me) finds this issue trying to solve a “SassError: Undefined variable” problem using Next.js 10: Here’s what worked for me.

I have a ‘styles’ directory with the files _variables.scss (defining $color-rebeccapurple: #663399;) and Home.module.scss. My next.config.js looks like this:

module.exports = {
  sassOptions: {
    prependData: `@use 'variables' as *;`,
  },
};

Note that I’m using @use instead of @import because the latter will be phased out. Also note the as * part to strip off the namespace (see documentation). Now I can use color: $color-rebeccapurple in my Home.module.scss. (Alternatively you could import with @use 'variables'; so it remains namespaced, and write color: variables.$color-rebeccapurple in your scss code.)

[kushalmahajan]

Plus environment variables should be available as normally to next build via .env or .env.development files.

I used dotenv-flow to make it work for me.