Currently, I am working on a NuxtJS website that consists of two main pages: index.vue and blog.vue. Each page has its own external CSS file located in the assets directory, named after the respective vue file (index.css and blog.css).
However, during testing using the dev command, I noticed that the styles from blog.css were overriding the styles from index.css, even though only the index.vue file was importing index.css.
An example of this conflict can be seen with unordered list styles - index.css sets it to list-style-type: none;, while blog.css sets it to list-style-type: circle;
Related code:
index.vue
<script>
import "~/assets/css/index.css";
</script>
index.css
ul {
list-style-type: none;
}
blog.vue
<script>
import "../assets/css/blog.css";
</script>
<template>
<main>
<ContentDoc />
</main>
</template>
blog.css
ul {
list-style-type: circle;
}
I have attempted different solutions such as using the in-built tags, utilizing the /public directory instead of /assets, and adjusting the webpack option extractCSS to see if anything changed.
Edit: After looking into the Vite build conditions and experimenting with Vite's build.cssCodeSplit set to both true and false, unfortunately, the issue remains unresolved.
Further investigation revealed that when I reload the index page, initially, only the expected css file is loaded. However, within milliseconds, the blog css file is also loaded, causing conflicts in the style editor where blog.vue appears alongside index.vue, index.css, Main.vue, FrameBox.vue, and Overlay.vue.
A temporary fix was found by hiding the blog.vue file in the Firefox style editor. Is there a way to replicate this behavior in the code?