Ускорьте стиль своего веб-сайта Svelte с помощью Stylify CSS

Учебник о том, как быстрее оформить свой веб-сайт Svelte с помощью Stylify CSS.

Стилизация + Svelte + Vite. Стилизуйте свой веб-сайт Svelte быстрее с помощью Stylify. Не изучайте селекторы и синтаксис. Используйте чистый синтаксис CSS и получайте сгенерированный CSS с расширенной оптимизацией для производства.

Для более легкого старта вы можете посетить Игровую площадку Stylify Stackblitz 🎮.

💎 Стилизация введения

Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис аналогичен CSS property:value. Определенные утилиты комбинируются с селекторами компонентов и в производственной среде минимизированы до минимума, например, от .color\:red,.button {color:red} до ._zx, ._ga{color:red}.

Stylify позволяет вам получать очень маленькие пакеты, генерировать дополнительные куски CSS с отложенной загрузкой и стилизовать страницу, написав HTML и селекторы 🤟.

🚀 Стройная настройка

Самый простой способ настроить Svelte — использовать CLI:

Беги yarn create vite app
Выберите svelte или svelte-ts
Затем cd app

Таким образом вы получите скелет приложения Svelte по умолчанию.

🔌 Стилизация интеграции

Установите пакет @stylify/unplugin с помощью NPM или Yarn:

КОПИРОВАТЬ

yarn add @stylify/unplugin
npm i @stylify/unplugin

Откройте vite.config.js и скопируйте в него следующее содержимое:

На последнем шаге откройте src/main.js и добавьте путь к stylify.css:

// ...
import './stylify.css'

Стилизация веб-сайта

Если вы скопируете приведенный ниже код в src/App.svelte и запустите yarn dev, вы получите стилизованный текст Hello World! 🎉:

Stylify отслеживает любые изменения в файлах, соответствующие маске в файлах пакета, и генерирует CSS в файле src/stylify.css.

Если вы добавите, например, color:blue, CSS будет автоматически обновлен 🎉.

Попробуйте Stylify прямо на Stackblitz.com 💡.

Компоненты

Чтобы не раздувать шаблоны с утилитами, вы можете использовать компоненты прямо в файлах, где они используются через параметры контента (ожидает объект JavaScript без скобок) или в конфиге компилятора.

Переменные

Если вам нравится чистый код, вы также хотите избежать жестко заданных значений в селекторах. Переменные могут быть определены так же, как и компоненты: