I am using a different css per template/page for example
pages/login/step1.vue
import "~/assets/css/step1.css"
pages/login/step2.vue
import "~/assets/css/step2.css"
but whenever I go from step1 to step2, step2 inherits some from step1 which I don't need.
Any help is appreciated ! Thanks
I think the better way to do that is to put the scoped attribute, like that your css is loaded only for the component asked.
<style scoped></style>
Hope this answer helped you :D
scoped does.Move your CSS files to the public folder:
public/assets/css/step1.css
public/assets/css/step2.css
Then, use useHead() in each page (or in your layout) to load the corresponding CSS dynamically:
<!-- pages/login/step1.vue -->
<script setup>
useHead({
link: [
{ rel: 'stylesheet', href: '/css/step1.css' }
]
})
</script>
<template>
<div>
Step 1 content
</div>
</template>
<!-- pages/login/step2.vue -->
<script setup>
useHead({
link: [
{ rel: 'stylesheet', href: '/css/step2.css' }
]
})
</script>
<template>
<div>
Step 2 content
</div>
</template>
Files in assets/ are processed by Webpack and are not directly accessible via /assets/... in the browser.
Files in public/ are served as-is and can be accessed directly with /filename.css.
public/css/step1.css
js
Copy code
useHead({
link: [
{ rel: 'stylesheet', href: '/css/step1.css' }
]
});
Wrong:
js
Copy code
href: '/assets/css/step1.css' this will fail in browser
I hope this helps solve your issue.
when you want to set your styles in just exact component use scoped in style tag
<style scoped></style>
it will fix it and set the styles just on than component
and if you want to add your style in children component just add deep fix set on children component
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
useage and detail :
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
