Из этого подробного руководства вы узнаете, как в полной мере использовать преимущества SCSS (Sass) в своем проекте Next.js. Мы углубимся в конфигурацию скрипта в файле package.json и в то, как импортировать стили SCSS в ваши компоненты. Вооружившись этими знаниями, вы сможете поддерживать безупречную организацию своих стилей и оптимизировать производительность своего веб-сайта.

Прежде чем мы начнем, чтобы поддерживать организованную структуру в вашем проекте Next.js, мы создадим папку «styles» в корневом каталоге проекта. Внутри этой папки мы создадим еще одну подпапку:

  1. «scss»: здесь мы будем размещать файлы SCSS для модульной записи стилей, включая global.scss.

Структура папок будет выглядеть следующим образом:

- project folder
	- styles
		- scss
	- other folders

Конфигурация скрипта в package.json

Чтобы включить компиляцию SCSS и наблюдать за изменениями во время разработки, мы обновим скрипты в файле package.json. Новая конфигурация выглядит следующим образом:

"scripts": {
	"dev":"next dev && sass --watch --update --style=expanded styles/scss:styles/css",
	"build":"npm run build:scss && next build",
	"start":"next start",
	"lint":"next lint",
	"build:scss": "sass styles/scss -o styles/css"
}

Пояснения к новым скриптам:

  • Скрипт «dev» запустит Next.js в режиме разработки благодаря next dev. Вторая команда, которую мы видим, используется во время разработки для наблюдения и автоматической компиляции файлов SCSS по мере внесения в них изменений. Команда выполняется постоянно, отслеживая файлы SCSS на наличие изменений. При обнаружении изменения в файле SCSS команда Sass автоматически компилирует его и генерирует соответствующий файл CSS в соответствии с заданной конфигурацией, устраняя необходимость вручную выполнять команду компиляции каждый раз при внесении изменения.
  • Скрипт «build» позаботится о сборке приложения для производственной среды. Перед созданием он выполнит сценарий «build:scss» для компиляции стилей SCSS в CSS.
  • Скрипт «build:scss» скомпилирует файлы SCSS в CSS с помощью Sass.

Производство

Это будет работать в среде разработки, но когда дело доходит до перехода на производство, необходимо будет внести изменения. Vercel и Next.js имеют встроенную поддержку Sass, поэтому развертывание вашего приложения на Vercel не должно вызвать проблем.

В случае использования Vercel ваши скрипты в package.json будут выглядеть так:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

Использование стилей в компоненте

В проекте Next.js нет необходимости явно конвертировать файлы .scss в .css. Когда вы импортируете файл .scss в компонент, Next.js автоматически выполняет компиляцию и применение этих стилей при создании вашего приложения. Таким образом, ваш проект может иметь такую ​​структуру:

└── styles
    ├── scss
    │   ├── _variables.scss
    │   └── main.scss
    └── css
        └── (no .css files are generated here, Next.js handles the compilation internally)
import "../styles/scss/main.scss";
// The rest of your code...

Заключение

Использование SCSS с Next.js является простым и улучшает организацию и удобство обслуживания ваших стилей. Благодаря упорядоченной структуре папок и правильной настройке скриптов в файле package.json вы можете скомпилировать стили SCSS в CSS и легко применять их к компонентам Next.js. Воспользуйтесь всеми преимуществами SCSS в своем проекте Next.js и создавайте более эффективные, повторно используемые стили.

Не забудьте настроить структуру папок и имена файлов в соответствии с вашими предпочтениями и потребностями.

Если вы хотите узнать больше, подписывайтесь на наш Блог или наш аккаунт в Инстаграме! А если вам нужно запустить проект, свяжитесь с нами сегодня!