Разрабатываю приложение с использованием бэкенда в качестве 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, то как быть с подключением шрифтов? Как вообще правильно подключить всё это дело?
Тут не столько проблема заключается в её решении, сколько в правильной постановки приложения. Меня не интересуют костыли, меня в большей степени интересует как правильно организовать подачу стилей и идти дальше, чтобы больше не встречать данных казусов.