Set different css styles for different components in vue-js project

Question

I have a vue- project with the following src directory tree

├── 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

The app will have two types of users :

Moderators
Users

Each type must have its own styling, components for users must use css-styles from assets/user/css, while moderators' from assets/user/css. If I use scoped import, styling doesn't propagate on external components like those of Bootstrap.

So my questions:

How to set different styling for respective components so that moderator will have everything in blue, and user - in orange?
Is it possible to set style programmatically depending on routes, defined in router?

Omer Tal · Accepted Answer · 2019-05-07 14:20:24Z

1

When you use Style in VueJS the css will render through all components. To use style only in the current component you need to uae scoped. This far you have done right, BUT! Bootstrap and other libraries mostly use components to represent their features so scoped will not work... But there is still a way! You can use >>> before the css you want to work in child-components. >>>b-corousel {color=red;}

answered May 7, 2019 at 14:20

Omer Tal

3712 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set different css styles for different components in vue-js project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related