Как использовать глобальные стили в 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> - он указывает, что стили являются глобальными и должны быть применены ко всему приложению, а не только к текущему компоненту.

@wilburn 

Также можно воспользоваться структурированными классами, которые помогут в реализации глобальных стилей.

1. Создайте файл с именем например globalStyles.scss и определите в нем ваши глобальные стили:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

:global {
  .bg-white {
    background-color: #fff;
  }

  .text-black {
    color: #333;
  }

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

1. Далее импортируйте этот файл в компонент, использовав его структурированные классы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- App.svelte -->

<script>
  import './globalStyles.scss';
</script>

<main class="bg-white">
  <h1 class="text-black">Пример использования глобальных стилей</h1>
  <button class="rounded-button">Нажми меня</button>
</main>

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