Установить разные стили CSS для разных компонентов в проекте vue-js

Question

У меня есть vue-проект со следующим src деревом каталогов

├── assets
|      └── moderator
|            └── css /* css styling for pages and components for moderators, e.g. everything is coloured blue*/
|      └── user
|            └── css /* css styling for pages and components for users, e.g. everything is coloured orage*/
├── components
|       └── moderator /* here are the .vue components for moderators' views */
|       └── user /* here are the .vue components for users' views*/

├── main.js
├── router.js
└── vue.config.js

Приложение будет иметь два типа пользователей:

1. Модераторы
2. Пользователи

Каждый тип должен иметь свой собственный стиль, компоненты для пользователей должны использовать css-стили из assets/user/css, а модераторы * из assets/user/css.Если я использую scoped import, стилизация не распространяется на внешние компоненты, такие как Bootstrap .

Итак, мои вопросы:

1. Как установить различныестилизация для соответствующих компонентов, чтобы модератор отображал все синим цветом, а пользовательский - оранжевым?
2. Можно ли программно устанавливать стиль в зависимости от маршрутов, определенных в router?

Answer 1

Когда вы используете стиль в VueJS, CSS будет визуализироваться через все компоненты. Чтобы использовать стиль только в текущем компоненте, необходимо uae scoped. Это далеко вы сделали правильно, НО! Bootstrap и другие библиотеки в основном используют компоненты для представления своих функций, поэтому область видимости не будет работать ... Но есть еще способ! Вы можете использовать >>> перед CSS, который вы хотите использовать в дочерних компонентах. >>>b-corousel {color=red;}