Using Scss global styles + modules - How To (with the newest NextJS built-in support)?

[Leviathan91]

Hi, I sticked to the instructions on how to use scss.

To add a stylesheet to your application, import the CSS file within pages/_app.js.

import React from 'react';
import '../styles/global.scss'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

with the global.scss :

$primary-color: #6dd3d6;

body {
    margin: 0;
    padding: 0;
}

This is the global style.

Now the same principle for a module:

import React from 'react';
import styles from './NavBar.module.scss';

export default function NavBar() {
    return(
    <nav className={styles.nav}>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );
}

with

@import "styles/global";

.nav {
    display: flex;
    padding: 20px;
    background: $primary-color;
}

That's all there is to my project.
If I now start the server, I get the following:

Error: Syntax error: Selector "body" is not pure (pure selectors must contain at least one local class or id)
  1 | $primary-color: #6dd3d6;
  2 | 
> 3 | body {
    |                ^
  4 |     margin: 0;
  5 |     padding: 0;

What am I missing? It is probably something obvious, since I am new to frontend developing. Also, I haven't configured anything in this project so far.

============================================================================

Out of the context side question: Is it possible to directly apply styles to the <nav> tag with modules?
My understanding of it so far is that you always have to pass down a className property to make modules work.
The easiest would be to just directly style the semantic tags, like so:

export default function NavBar() {
    return(
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );
}  

and

@import "styles/global";

nav {
    display: flex;
    padding: 20px;
    background: $primary-color;
}

but I think that is not possible, it is?

[jamesmosier]

That error is occurring because you are importing global.scss into NavBar.module.scss. SCSS/CSS modules cannot have element selectors in the top level like that.

You must always use a selector with CSS modules. So if you want to apply styles to <nav> you would have to give it a className. The only alternative would be if you had a wrapping element you applied a class to:

<div className={styles.wrapper}>
  <nav>

.wrapper {
  nav {
    // styles
  }
}

[websocket98765]

Do you know if there is any way (hacky or not) to import scss for a component without using CSS modules or needing to wrap it like you've shown, which still uses CSS modules?

I'm trying to quickly convert a Create React App.

Ideally, I'd like a simple import like @import ./Foo.scss;

[jamesmosier]

see this comment for resources: #15577 (comment)