0

Разрабатываю приложение с использованием бэкенда в качестве Laravel и фронтенда в качестве VueJS. Приложение SPA. Во Vue использую routes.

Файлы стилей раскидал в папке sass Имеется несколько файлов: app, variables, auth, profile.

Имеется одна входна точка app.vue в котором расположен следующий код:

<template>
    <router-view></router-view>
</template>

Далее имеются несколько файлов: Home.vue, Auth.vue, Profile.vue.

Они в себе имеют подключение других модулей. Собственно в каждом из этих файлов я делаю подключение стилей через:

<style lang="sass" scoped>
    @import "../../sass/app.sass"
</style>

Но у меня возникают проблемы именно с этим. Каждый этот файл внутри себя использует ещё роуты и поэтому каждый этот импорт бессмысленно добавлять к каждому компоненту, поэтому я внутри него добавляю селектор ::v-deep для углубления, но даже суть не в этом.

Суть в том, что я не могу правильно раскидать логику.

Во-первых, каждый мой стиль: auth.sass, app.sass имеет полноценный код

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap')

@import "variables"

*
    outline: none
    margin: 0
    padding: 0
    box-sizing: border-box

a
    color: inherit
    text-decoration: none

    &:hover, &:active, &:focus
        text-decoration: none
        color: inherit

ul, li, ol
    list-style-type: none

body
    font-family: $font-family-default
    background-color: $body-bg

Так вот, данный код при импорте ну никак не работает даже на родительский компонент, проблема заключается в селекторах, каждому html элементу задаётся data-v-782dcf84 , соответственно в стилях соответственно body[data-v-782dcf84], НО, когда я открываю тот же инспектор кода, у меня body не имеет дополнительный свойств. Просто тег . Окей, если с этим проблему можно решить, в входной файл app.vue добавить без scoped, то как быть с подключением шрифтов? Как вообще правильно подключить всё это дело?

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

1 ответ 1

1

Я делаю так для каждого компонента отдельный файл стилей с именем _myawesomesassfle.scss.

Все что используется больше 2 раз выношу в файл _variable.scss, или _mixins.scss

В корне папки создаю главный файл style.scss/main.scss или как мне угодно. В него уже подключаю, базовые файлы:

@import "libs";

/* Utils */
@import "utils/variables";
@import "utils/mixins";
@import "utils/grid";
@import "utils/extends";
@import "utils/fonts";

/* Base */
@import "base/base";

а дальше просто уже файлы стилей компонентов, что бы не захламлять однофайловые компоненты. В каждом компоненте есть рут элемент, которому даю класс, например profile, в _profile.scss пишу код с привязкой к класу, например:

.profile{
   // стили которые касаются только конкретного компонента
}

и при сборке проекта подключается уже один готовый минифицырованый файл

моя примерная структура:

├── base
│   └── _base.scss
├── includes
│   ├── _footer.scss
│   └── _header.scss
├── _libs.scss
├── style.scss
└── utils
    ├── _extends.scss
    ├── _fonts.scss
    ├── _grid.scss
    ├── _mixins.scss
    ├── _smart-grid.scss
    └── _variables.scss

Ну как-то так)

Структура vue компонента:

<template>
  <div class="myawesomeclass">
    <slot/>
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>
<script>
  import Header from '../components/Header'
  import Footer from "../components/Footer";
  export default {
    components: {Header, Footer},
  }
</script>
<style lang="scss">
@import "../styles/myawesomefile";
</style>

Файл стилей этого компонента

.myawesomeclass{
  @include wrapper();
  &__list{

    @include flex_container(row, center, space-between);

    &__item{
      width: 262px;
      @include flex_container(column, center, center);

      .subtitle{
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        @include flex_container(row, center, space-between);
      }

      img{
        width: auto;
      }
    }

    @for $i from 1 through 4{
      &__item:nth-child(#{$i}){
        .subtitle{
          &::before{
            content: "#{$i}";
            font-size: 60px;
            font-weight: 400;
            font-style: normal;
            margin-right: 20px;
          }
        }
      }
    }
  }
}

@include adaptive(tablet-sm){
  .myawesomeclass{
    &__list{

    }
  }
}

@include adaptive(mobile){
  .myawesomeclass{
    &__list{
      flex-wrap: wrap;
      &__item{
        width: 100%;
        text-align: left;
      }
    }
  }
}
@include adaptive(mobile){
  .myawesomeclass{
    &__list{
      flex-wrap: wrap;
    }
  }
}

и да адаптив я импортирую в каждый элемент отдельно, через @include adaptive(mobile) adaptive - это миксин, если что) почему я так делаю, да потому что мне так удобней, все четко разделено между собой)

3
  • Как подключаются шрифты? Как изменяете body? Можно минимальный код базовой структуры, которая используется во всех файлах
    – MoloF
    24 окт 2019 в 14:40
  • 1
    шрифты в файлик _fonts.scss ) Код сейчас добавлю в ответ
    – Swartex
    24 окт 2019 в 14:42
  • 1
    @MoloF дополнил ответ
    – Swartex
    24 окт 2019 в 14:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.