How to import Sass modules in Next.js components

Question

With the latest Next.js I can import Sass styles globally in pages/_app.js with a directive like import '../styles/global.scss'; and without depending on @zeit/next-sass.

Does this work at the component level? For example, can I have a components/* directory where I keep my components, and each component has a *.tsx file that imports a *.module.scss file?

That's not working for me right now. I don't get errors but component-level styles don't load while the global styles do.

Edit: To be clear, I do not want to import an object like import styles from ...scss. I simply want to import Sass for this component, not any object that has properties.

Here's a code example where I can see the globals.scss styles but not the Main.module.scss styles when I run it with npx run dev.

From scratch I ran npx create-next-app _ and then npm install sass. There are only five important files, once I make a simple Main component that I want to style:

components/Main/Main.tsx :

import './Main.module.scss';

export default function Main() {
  return <div className="Main">Main</div>;
};

components/Main/Main.module.scss :

This rule is not applied for some reason!

.Main {
    color: blue;
}

pages/_app.js :

These global styles do get applied!

import '../styles/globals.scss';

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

pages/index.js :

import Head from 'next/head';
import Main from '../components/Main/Main';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Main />

    </div>
  )
};

styles/globals.scss :

This style rule is applied but not color: blue above.

* {
  box-sizing: border-box;
}

Yes, Sass (including Sass modules) has built-in support in Next.js as long as you install sass with npm install sass. Could you provide a code example where you're trying to use Sass modules? — juliomalves
but protip: don't bundle your CSS into your JS. Make your sass a separate build step and keep it a plain-ass static resource so browsers can cache it independently and your index.html can load it with a standard <link>. js-css and js-sass might seem convenient, but they don't need webpack or bundling or anything like it to work. Just run your sass compile independent of your JS bundle. Your users deserve it. — Mike 'Pomax' Kamermans
@juliomalves I added a code example @Mike'Pomax'Kamermans Totally agree with you, all I want to do is structure my project so each component is in components/*/*.tsx and has styles in components/*/*.module.scss. — Ganymede
@Ganymede To clarify your last edit, you have to import Sass modules as an object and use its properties. You can't import it like global Sass, because it's scoped. — juliomalves

juliomalves juliomalves · Accepted Answer · 2021-02-28T01:13:16

Because Sass modules scope the class names within the modules they are used, you'll need to import it as an object (styles in this example) and each class is accessed as a property on the imported object.

import styles from './Main.module.scss';

export default function Main() {
    return <div className={styles.Main}>Main</div>;
};

How to import Sass modules in Next.js components

1 Answers