@MRcracker

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

Добрый день. Для работы использую 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"

Подскажите, как исправить?
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 2
@slide13
frontend/web-developer
Я nextjs не использовал, но судя по ошибке он говорит, что глобальные css файлы можно хранить только в одном месте, а если требуется инкапсулировать css по компонентам, то нужно использовать css модули.
Т.е. по идее css модули должны работать по дефолту, следовательно переименовываем файл в Footer.module.scss и также его и импортируем.
Ответ написан
Комментировать
cannibal_corpse
@cannibal_corpse
Верстальщик руками
Итак:
В 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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы