在vue-js项目中为不同的组件设置不同的CSS样式

Question

我有一个带有以下src目录树的vue-项目

├── 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. 用户

每种类型都必须具有自己的样式，用户的组件必须使用assets/user/css中的css样式，而assets/user/css中的 moderators'。 如果我使用scoped导入，则样式不会在 Bootstrap 的外部组件上传播。

所以我的问题：

1. 如何为各个组件设置不同的样式，以便主持人将所有内容设置为蓝色，将用户的所有内容设置为橙色？
2. 是否可以根据router中定义的路线以编程方式设置样式？

Answer 1

当您在VueJS中使用样式时，css将通过所有组件进行渲染。要仅在当前组件中使用样式，您需要使用scoped。到目前为止，您做对了，但是！ Bootstrap和其他库大多使用组件来表示其功能，因此作用域将无法使用...但是仍然有一种方法！您可以在子组件中要使用的CSS之前使用>>>。 >>>b-corousel {color=red;}