vue.js -Imported css files getting mixed up while routing from one page to another

Question

I have two components in views folder namely Home.vue and Register.vue I have imported separate css files for each component

Home.vue

<style scoped>
  @import "../assets/css/bootstrap.min.css";
  @import "../assets/css/mainpages/style.css";
  @import "../assets/css/mainpages/custom.css";  
  @import "../assets/css/mainpages/css/plugins.min.css";  

</style>

Register.vue

<style  scoped>

  @import "../assets/css/main.css";
  @import "../assets/css/bootstrap.min.css";
  @import "../assets/css/theme.css";

</style>

I am using vue router to route. When routing from Home.vue to Register.vue everything is good. But when i try to route back from Register.vue to Home.vue the css properties imported in Registered.vue gets applied to Home.vue

What may be the reason for such a behavior.

I have added scope to all style tags, but it is also not working.

Try to add scope only to those CSS which are unique for the given component - and leave the rest of the CSS (which is supposedly global - e.g. the Bootstrap) unscoped. Or better yet - import the global CSS in App.vue or even main.js - and define your scoped CSS directly into your Single-File component rather than separate CSS file. — IVO GELOV
OK I will do that. Actually I am trying to integrate an admin section with login to already existing pages. So both are designed seperatly. — vithu shaji

vithu shaji vithu shaji · Accepted Answer · 2020-09-21T13:44:05

You need to change the way you are importing external files as scoped ones :

Home.vue

<style scoped src="../assets/css/bootstrap.min.css"></style>
<style scoped src="../assets/css/mainpages/style.css"></style>
<style scoped src="../assets/css/mainpages/custom.css"></style>
<style scoped src="../assets/css/mainpages/css/plugins.min.css"></style>

The same applies for register.vue

Thanks to Filip Jerga for the answer

vue.js -Imported css files getting mixed up while routing from one page to another

1 Answers