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

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

所以我的问题：

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

Answer 1

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