Как подключить стили в nextjs?

Question

[MRcracker]

Для работы использую nextjs. Пытаюсь в компонент добавить файл со стилями. Для написания стилей использую scss, но получаю ошибку

"/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"

Подскажите, как исправить?

Answer 1

[Ilya Olovyannikov]

Итак:
В pages/_app.[tsx,jsx,js,ts] можно добавить глобальные стили
import '../client/resources/styles/style.scss';

Компоненты стилизуем или Tailwind или Styled-Components или CSS-Modules
В последнем случае:

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

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

Где s - это сгенерированные scoped-объекты, уникальные для каждого компонента.

Если надо вложить глобальный стиль в модуле, есть директива :global

CSS:

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

JS:

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