Vue - стилизация компонентов

При использовании компонентов Vue, Vite позволяет использовать почти любой метод описания css стилей, например sass, css, scss. Самый простой способ включить эти
библиотечные плагины в ваших шаблонах Vue — это устанавливать их, когда вы инициализируйте свой проект, либо потом доставить инструменты, для поддержки через npm.

При использовании тега style внутри компонента Vue, вы можете указать язык стилей, как атрибут тега, при условии, что вы установили специальный языковой плагин.
Например, если вы решили установить препроцессор Stylus, сначала вам нужно установить пакет Stylus в свой проект в качестве зависимости, выполнив
следующие команды:

npm add -D stylus
 #OR
yarn add -d stylus

Затем вы можете добавить атрибут lang="stylus" к тегу style:

<style lang="stylus">
ul
  color: #2c3e50;
  > h2
  color: #22cc33;
</style>

Еще одно преимущество использования Vue — определение области видимости стилей с помощью атрибута scoped.
Это полезный способ создания изолированных стилей CSS для конкретных компонентов.

Он также переопределяет любые другие глобальные правила CSS в соответствии с правилом CSS специфика.

Теперь давайте потренируемся импортировать SCSS, плагин препроцессор для CSS, чтобы использовать
в своем приложении и напишем несколько стилей с ограниченной областью видимостью в следующим
упражнении.

Упражнение

Создайте и импортируйте пустой компонент как показано в упражнении.

Создайте скелет компонента, и добавьте в секцию template данный код:

<template>
  <div>
    <h1>{{ title }}</h1>
    <h2>{{ subtitle }}</h2>
    <ul>
      <li>{{ items[0] }}</li>
      <li>{{ items[1] }}</li>
      <li>{{ items[2] }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: 'My list component!',
        subtitle: 'Vue JS basics',
        items: ['Item 1', 'Item 2', 'Item 3']
      }
    },
  }
</script>

Установите зависимость - scss, установив через терминал npm install -D sass

Затем добавьте секцию style, и установите атрибут языка - lang="scss":

<style lang="scss"></style>

Мы создадим папку внутри src - styles, чтобы разместить внутри файл стилей, и подключить его в компоненте, и добавьте внутрь файл typography.scss

с содержимым:

/* typography.scss */
  $color-green: #4fc08d;
  $color-grey: #2c3e50;
  $color-blue: #003366;
  h1 {
    margin-top: 60px;
    text-align: center;
    color: $color-grey;
    + h2 {
       text-align: center;
       color: $color-green;
    }
  }
  ul {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.25);
    > li {
      color: $color-grey;
      margin-bottom: 4px;
    }
}

После этого, импортируем файл стилей, внутрь компонента:

<style lang="scss">
  @import '@/styles/typography.scss';
</style>

Алиас - @, мы настраивали в первых статьях, где объяснялось, как он работает.

Добавьте атрибут scoped в тег <style>, чтобы применить эти стили только к этому компоненту. Затем вы можете использовать переменную -$color-blue из импортированной таблицы стилей:

<style lang="scss" scoped>
  @import '../styles/typography';
  h1 {
    font-size: 50px;
    color: $color-blue; // Use variables from imported stylesheets
  }
</style>

Создайте новую таблицу стилей с именем global.scss в папке styles, содержащую только стили для основных элементов страниц, например:

/* /src/styles/global.scss */
body {
  font-family: 'Avenir', Helvetica, Arial,
  sans-serif;
  margin: 0;
}

И импортируйте ваши глобальные стили были, внутрь App.vue, так как данные стили используются внутри большей части страниц сайта.

<style lang="scss">
  @import '@/styles/global.scss';
</style>