Установка и первоначальная настройка

Подготовка окружения

Для работы с Carbon Components Svelte требуется современная среда разработки на основе Node.js. Минимальные версии Node.js и npm должны соответствовать требованиям SvelteKit или Vite. Проверка установленных версий выполняется командой:

node -v
npm -v

Для нового проекта рекомендуется использовать SvelteKit, который обеспечивает интеграцию с современными сборщиками и оптимизацию приложений. Создание нового проекта SvelteKit производится командой:

npm create svelte@latest my-app
cd my-app
npm install

Установка Carbon Components Svelte

Для интеграции Carbon Components Svelte необходимо установить соответствующий пакет через npm:

npm install carbon-components-svelte

Дополнительно устанавливается пакет стилей carbon-components, так как библиотека Svelte использует готовые CSS-классы:

npm install carbon-components

После установки нужно убедиться, что проект использует корректные версии пакетов. Важно, чтобы версии Carbon Components и Carbon Components Svelte были совместимы между собой.

Подключение стилей

Carbon Components Svelte требует подключения стилей CSS из библиотеки carbon-components. В SvelteKit или Vite стили подключаются в глобальном файле проекта, обычно src/app.css или src/global.css:

@import 'carbon-components/css/carbon-components.css';

Для корректной работы темизации можно использовать SCSS-файлы Carbon, если проект поддерживает препроцессоры:

@use 'carbon-components/scss/globals/scss/styles.scss';

Это позволяет гибко настраивать переменные темы, цвета и типографику.

Настройка Svelte для Carbon Components

В SvelteKit проекте необходимо убедиться, что svelte-preprocess настроен для работы с SCSS и PostCSS, если планируется использовать кастомные темы Carbon. Конфигурация svelte.config.js выглядит следующим образом:

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

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

Это гарантирует, что стили Carbon корректно обрабатываются и интегрируются в проект.

Импорт компонентов

После установки и подключения стилей компоненты Carbon Components Svelte импортируются напрямую в Svelte-файлы. Например, кнопка Button импортируется следующим образом:

Возможные ключевые параметры компонента Button:

  • kind — стиль кнопки (primary, secondary, danger и т.д.)
  • size — размер кнопки (sm, md, lg)
  • disabled — логическое значение, блокирующее взаимодействие

Настройка глобальной темы

Carbon Components Svelte поддерживает светлую и тёмную темы, которые задаются через класс на корневом элементе body:

  • bx--theme--g10 — светлая тема
  • bx--theme--g100 — тёмная тема

Для динамического переключения темы можно использовать привязку класса Svelte:

Настройка локализации и иконок

Для компонентов Carbon, требующих локализации (например, DatePicker) или иконок, необходимо подключить соответствующие пакеты:

npm install @carbon/icons-svelte

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

Локализация для компонентов, использующих даты и текстовые сообщения, выполняется через передачу объектов i18n в соответствующие компоненты.

Настройка проекта для производства

Для деплоя проекта с Carbon Components Svelte необходимо учитывать:

  • Минификацию стилей через Vite или SvelteKit.
  • Удаление неиспользуемых компонентов для уменьшения размера сборки.
  • Настройку tree-shaking для Carbon иконок и SCSS-файлов.

Пример конфигурации Vite для оптимизации:

import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      treeshake: true
    }
  }
});

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

Оглавление