Из этого подробного руководства вы узнаете, как в полной мере использовать преимущества SCSS (Sass) в своем проекте Next.js. Мы углубимся в конфигурацию скрипта в файле package.json и в то, как импортировать стили SCSS в ваши компоненты. Вооружившись этими знаниями, вы сможете поддерживать безупречную организацию своих стилей и оптимизировать производительность своего веб-сайта.
Прежде чем мы начнем, чтобы поддерживать организованную структуру в вашем проекте Next.js, мы создадим папку «styles» в корневом каталоге проекта. Внутри этой папки мы создадим еще одну подпапку:
- «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 и создавайте более эффективные, повторно используемые стили.
Не забудьте настроить структуру папок и имена файлов в соответствии с вашими предпочтениями и потребностями.
Если вы хотите узнать больше, подписывайтесь на наш Блог или наш аккаунт в Инстаграме! А если вам нужно запустить проект, свяжитесь с нами сегодня!