How to import SCSS on Component Level with Next.js

Question

I am coming from a CRA background and working my way through Next.js version 9.4.2

My project tree looks something like this :-

pages/
    _app.tsx
    index.tsx
components/
    Navbar/
        index.ts
        Navbar.tsx
        Navbar.scss

Inside my Navbar.tsx I have a statement import './Navbar.scss';

This gives me the following error :-

./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx

The error, as mentioned, goes away if I move the import Navbar.scss statement to pages/_app.tsx

I know I can switch to Navbar.module.scss, but I don't want to go down the route of modular scss as I expect my scss to get complex I would like to stick to the manner in which I write my scss and not keep finding work arounds to issues that might arise later. I am open to being convinced here but I have not found good read ups on this to choose it as my path.

So by the looks if it, I am stuck with importing all <component>.scss files in _app.tsx. This will leave me with a long list of <component>.scss imports in my _app.tsx and I will also be left with a lot of <component>.scss files for Components that might conditionally not render.

What are my options here ?

A solution that seems to solve this is here: https://stackoverflow.com/questions/45192088/import-css-files-from-node-modules-in-next-js#answer-60847860 — Brdjx, Jul 26 '20 at 01:08

Lord Reptilia · Accepted Answer · 2020-09-09T08:13:14.840

Your Navbar.scss file is not named properly.

Let's say your stylesheet contains something like...

$color: red;

.someclassselector {
    color: $color;
}

Component stylesheet files have to be named in the following convention for next.js to compile them as addressed in next's css getting started guide

<TheComponent>.module.scss

be imported like this:

import styles from './<MyComponent>.module.scss>';

and be applied to the component like this:

<TheComponent className={styles.someclassselector} />

Not really an expert but it seems that you should stick to class selectors as global selectors can only be declared if you import them in pages/_app.js. You may name a main.scss file to use Global or Tag Element selectors like h1 {},h2{}, * {}, etc.

How to import SCSS on Component Level with Next.js

1 Answers1