Как использовать глобальные стили в Svelte?

@wilburn 

В Svelte глобальные стили можно использовать, определив их в отдельном файле .css или .scss и импортировав в компоненты через специальный тег <style global>. Например, если у нас есть файл global.css с таким содержимым:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

body {
  background-color: #fff;
  color: #333;
}

button {
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 16px;
}

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

1
2
3
4
5
6
7

  @import 'global.css';


Заголовок
Кнопка

Теперь все элементы body и button в данном компоненте будут использовать стили из global.css. Обратите внимание на тег <style global> - он указывает, что стили являются глобальными и должны быть применены ко всему приложению, а не только к текущему компоненту.