Как правильно включить Sass в NextJs?
Когда я использую файлы Sass в NextJs, я получаю предупреждения «conflicting order» от mini-css-extract-plugin. Конфликт всегда портит мои стили build. Вы можете увидеть ошибку, описанную по следующей ссылке:
Это статья с решением этой проблемы, но в ней говорится о заказе файлов Sass только для одной страницы. Я не уверен, как сделать заказ, когда есть несколько страниц. Как решить проблему conflicting order?
Ответы 1
если вы используете nextjs 9.3 или выше, вы можете использовать его как модули css. По крайней мере, так они рекомендуют делать.
Это пример.
Вы также можете проверить поддержку Sass в документации Next.js.
-- Обновлять
Лучший способ сделать это — создать отдельный модуль scss для каждого компонента. Это будет выглядеть примерно так.
Components
├── Header
│ ├── Header.js
│ ├── Header.module.css
├── Footer
│ ├── Footer.js
│ ├── Footer.module.css
├── Nav
│ ├── Nav.js
│ ├── Nav.module.css
Основная идея использования модулей css заключается в том, чтобы вы не могли использовать глобальный лист. Таким образом, css будет оптимизирован для разделения кода на компоненты, и вам не придется беспокоиться об объявлении одного и того же класса дважды, каждый файл модуля css будет генерировать уникальное имя класса.
Я работаю над проектом с использованием модулей css, проект еще не завершен, но файловая структура почти такая же, как и с sass, вы можете посмотреть, если хотите.
https://github.com/edgarlr/portfolio/tree/main/components
Привет @SachinTitus, я просто обновляю свой ответ, надеюсь, это то, что вы искали, дайте мне знать, если у вас есть другие вопросы.
Спасибо за ответ. В примере они импортируют styles.scss в _app.js, и я нахожу это сбивающим с толку. Как я могу добавить файл scss только для страницы? Это то, что нам нужно, когда есть несколько страниц, верно?