How to include styles in nextjs?

Question

React

Good afternoon. For work I use nextjs. I'm trying to add a file with styles to the component. I use scss to write styles, but I get the error

"/components/Common/Footer/footer.scss
Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first- party global CSS imports to pages/_app.js Or convert the import to Component-Level CSS (CSS Modules)
Read more: https://nextjs.org/docs/messages/css-global
Location: components\Common\Footer \index.jsx" Tell me

how to fix it?

Answer 1

I did not use nextjs, but judging by the error, it says that global css files can only be stored in one place, and if you need to encapsulate css by components, then you need to use css modules.
Those. in theory, css modules should work by default, therefore we rename the file to Footer.module.scss and import it as well.

Answer 2

So:
In pages/_app.[tsx,jsx,js,ts] you can add global styles Stylable Components or Tailwind or Styled-Components or CSS-Modules In the latter case:
import '../client/resources/styles/style.scss';

import styles from './App.module.scss'

export const App = () => {
  <div className={s.title}>Hello World</div>
}

Where s are generated scoped objects unique to each component.
If you want to nest a global style in a module, there is a :global
CSS directive:

.module {
  font-size: 16px;
  
  :global {
    .library {
      font-size: 20px;
    }
  }
}

JS:

<div className={s.module}>
  Я - модуль, мои стили никому неизвестны!
  <span className="library">Я - глобальный, обрати внимание, как написан мой класс. Он определяется глобальными стилями, которые мы можем перезаписать с помощью :global при необходимости!</span>
</div>