Почему не всегда применяются стили к vue SPA?

Question

[danilr]

Делаю с помощью @vue/cli если это важно, запускаю npm run serve/
Делаю небольшой проект, поэтому мне удобно все стили вынести в один файл style.css, который подключил к корневому единственному html файлу.
У меня подключен VueRouter - если перехожу по роуту через интерфейс все хорошо, стили применяются, но если перейти на какой то роут( в частности динамический) и обновить там страницу, то контент есть, а все стили просто исчезают.
Или если перейти так localhost:8080/catalog и обновить, то все хорошо, localhost:8080/catalog - добавить слеш и опять все стили пропадают..
Почему так происходит, как поправить?

Comments

[its2easyy]

Если обновить страницу, в devtools файл показывается как загруженный? в dom есть нужный элемент style? если есть то внутри css файла нужные стили находятся?

[danilr]

its2easyy, все ссылки на css прописаны. link есть, не понимаю в чем проблема.

Answer 1

[Dmitry Barkowski]

В корневом компоненте приложения в секцию стилей добавьте
@import './path/to/your/common/styles.css';

Comments

[danilr]

Спасибо! Не додумался так попробовать) А так он ведь автопрефиксы добавлять не будет?

[StasEx]

Огромнейшее спасибо!
Работаю с VUE router и CLI. Есть динамические пути с товарами. При перезагрузке товара слетают все стили, просто кошмарно было. Сейчас все работает как часы.

Мое исправление в App.vue

<style>
 @import '../public/style.css';
</style>