Next.js: Global scss variable

[vitaliemiron]

Bug report

Sass variables in global file aren't visible in .module scss files.

To Reproduce

1. clone - https://github.com/vitaliemiron/nextjs-global-scss
2. npm i
3. npm run dev

SassError: Undefined variable.
  ╷
3 │   color: $blue;

Screenshots

System information

• Version of Next.js: 9.3.1

[P233]

I'll recommend creating a common scss file includes all variables/functions/mixins, and also set up a webpack alias for that file. Then in the component sass files, you could @use "common" as *; and start using all your variables.

[aniket5429]

But that means manually importing variables, mixins etc in every .module.scss files. Further, adding custom plugins like sass-resources-loader disables the built-in css configuration .

So I tried, switching back to [email protected] and using zeit@sass plugin with sass-resources-loader in next.config.js which solved the problem. Still hoping for a way in [email protected]

[vitaliemiron]

But that means manually importing variables, mixins etc in every .module.scss files. Further, adding custom plugins like sass-resources-loader disables the built-in css configuration .

So I tried, switching back to [email protected] and using zeit@sass plugin with sass-resources-loader in next.config.js which solved the problem. Still hoping for a way in [email protected]

This solution works in [email protected] for me.
But in this example they import styles without sass-resources-loader - https://github.com/zeit/next.js/tree/canary/examples/with-next-sass

My solution was to move to styled components.

[dscafati]

This needs to be addressed. Using withSass() from @zeit/next-sass disables the Buil-in CSS support (https://err.sh/next.js/built-in-css-disabled)

[ebs-PriyankaKanwar]

Hello Team
I have facing issues regarding the next-CSS . I have using next-CSS but they are giving me a warning and when I removed the next-CSS from next.config file. my style CSS has not loaded chunks in the production. and my CSS is out of order in a production build.
Can you plz help me.

[Timer]

This is the expected behavior. Please import your variables as explained above.