CODEWITHSUNDEEP
cssvue.jsvuejs2vue-component
FirePapaya
FirePapaya

Reputation: 518

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

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 :

  1. Moderators
  2. 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:

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

Upvotes: 2

Views: 1304

Answers (1)

Omer Tal
Omer Tal

Reputation: 371

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;}

Upvotes: 1

Related Questions