Интеграция с системами стилей

В SvelteKit интеграция с CSS и CSS-фреймворками осуществляется через файл src/app.css или любые другие глобальные CSS-файлы, подключаемые через src/routes/+layout.svelte или +layout.ts. Основная задача — корректное определение области видимости стилей: глобальные стили подключаются один раз, а компонентные — остаются изолированными благодаря Svelte-подходу к CSS.

Пример подключения глобального CSS-фреймворка, например, Tailwind CSS:

// svelte.config.js
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';

export default {
  preprocess: preprocess({
    postcss: true
  }),
  kit: {
    adapter: adapter(),
  }
};
/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

После этого Tailwind-утилиты доступны во всех компонентах. Важный момент — конфигурация tailwind.config.cjs должна учитывать путь к файлам Svelte, чтобы PurgeCSS удалял неиспользуемые классы.

Scoped стили в компонентах

SvelteKit по умолчанию поддерживает локальные стили, которые применяются только к компоненту. Это достигается с помощью <style> внутри .svelte файла:

<script>
  let active = false;
</script>

<button class:active={active}>
  Нажми меня
</button>

<style>
  button {
    background-color: lightgray;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
  button.active {
    background-color: steelblue;
    color: white;
  }
</style>

Ключевой особенностью является автоматическая генерация уникальных классов Svelte для каждого компонента. Это предотвращает конфликты стилей при масштабировании приложения.

Использование CSS-модулей

CSS-модули позволяют импортировать CSS как объект, где ключи — это имена классов, а значения — сгенерированные уникальные имена. В SvelteKit это делается через svelte-preprocess:

// svelte.config.js
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    postcss: true,
    typescript: true
  })
};
<script lang="ts">
  import styles from './Button.module.css';
</script>

<button class={styles.primary}>
  Кнопка
</button>
/* Button.module.css */
.primary {
  background-color: teal;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
}

Преимущество CSS-модулей в том, что они дают гарантированную изоляцию стилей, но при этом позволяют легко использовать глобальные переменные через :global().

Интеграция UI-библиотек

SvelteKit поддерживает работу с различными UI-библиотеками, такими как Svelte Material UI, Flowbite-Svelte, Skeleton UI. Принцип интеграции схож: библиотека устанавливается через npm и подключается в компоненты. Пример для Skeleton UI:

npm install @skeletonlabs/skeleton
<script>
  import { Button } from '@skeletonlabs/skeleton';
</script>

<Button color="primary" size="lg">
  Отправить
</Button>

Skeleton автоматически импортирует стили, но при необходимости можно подключить кастомные темы через глобальный CSS-файл или SCSS-переменные.

Работа с SCSS и препроцессорами

SvelteKit поддерживает SCSS, Less и PostCSS через svelte-preprocess. Пример настройки SCSS:

import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    scss: {
      prependData: `@import 'src/styles/variables.scss';`
    }
  })
};

Теперь переменные и миксины доступны в каждом компоненте, что значительно ускоряет разработку масштабируемого UI.

/* variables.scss */
$primary-color: #4f46e5;
$secondary-color: #facc15;
$border-radius: 6px;
<style lang="scss">
.button {
  background-color: $primary-color;
  border-radius: $border-radius;
  color: white;
  padding: 12px 24px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
</style>

Темизация и CSS-переменные

Для динамической темы удобно использовать CSS-переменные в корневом элементе:

:root {
  --color-primary: #4f46e5;
  --color-secondary: #facc15;
}

.dark-mode {
  --color-primary: #2563eb;
  --color-secondary: #fbbf24;
}

Компоненты могут использовать переменные без изменения структуры:

<style>
.card {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: 16px;
  border-radius: 8px;
}
</style>

Переключение тем делается через добавление/удаление класса на html или body.

Интеграция с Tailwind и другими утилитами

Tailwind в SvelteKit можно комбинировать с компонентными библиотеками. Важно правильно настроить PurgeCSS, чтобы не удалялись динамически генерируемые классы:

// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{svelte,ts,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Для динамических классов часто используется синтаксис [className] или class:active={condition}, чтобы Tailwind правильно распознавал используемые утилиты.

В результате комбинация глобальных стилей, локальных CSS, CSS-модулей и UI-библиотек позволяет создавать в SvelteKit масштабируемые и гибкие интерфейсы, легко поддерживать тему и интегрировать сторонние решения без конфликта стилей.

Оглавление