@MaintstDev
Python | Vue

Имеется большой css код. Нужно ли выносить его в отдельный файл?

Использую NUXT. У компонентов очень много стилей, файл становится нереально большим из-за этого.
Стоит вынести его в отдельную директорию? Как это сделать?
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
kleinmaximus
@kleinmaximus
Варианты:
  1. Поскольку во vue-компоненте может быть несколько блоков style, то их можно вынести в несколько отдельных файлов.
    <template>
    ...
    <template>
    
    <script>
    export default { ... }
    <script>
    
    <style scoped src="./style1.css"></style>
    <style scoped src="./style2.css"></style>
    <style src="./style3.css"></style>


    По сути, это единственный нормальный вариант.

    P.S.; В отдельные файлы, кстати, можно вынести и код скрипта или шаблон.

  2. Вынести какие-то общие стили в отдельный файл и подключить:



P.S.: Если у Вас получается очень большой компонент, то надо его дробить на более мелкие, поскольку у Вас явно получается компонент, который одновременно выполняет несколько разных функций.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
REKTOR_RG
@REKTOR_RG
Желательно.
В блоке <head>...</head> допишите строку:
<link rel="stylesheet" href="/css/my.css">
В href пишем путь к файлу css.
Ответ написан
@99percent
Frontend-разработчик
В Vue проектах обычно есть главный компонент - App.vue. Так вот туда можно и нужно подключать файлы со стилями(в основном те, что требуются глобально). Но нужно помнить, что в таком случае они становятся общими для всего проекта. Смотрите, чтобы они не поломали стили в других компонентах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы