My goal is to import Material SCSS exclusively for my Admin component.
While this setup works smoothly during local development, the issue arises when I deploy my site to Firebase hosting - the Material styles start affecting not just my Admin component, but all components in my SPA.
I have experimented with different approaches:
// Attempting to import the SCSS files within the Admin component ID
#admin {
@import "../../../../node_modules/vue-material/dist/vue-material.min.css";
@import "../../../../node_modules/vue-material/dist/theme/default.css";
}
then
// Trying to import the SCSS files within the Admin component CLASS
.admin {
@import "../../../../node_modules/vue-material/dist/vue-material.min.css";
@import "../../../../node_modules/vue-material/dist/theme/default.css";
}
Next, I attempted to include the imports directly inside the Admin component itself
// Importing the SCSS files within the Admin component's beforeCreate lifecycle hook
beforeCreate() {
// Ensuring style files are only loaded if this component is being used
import("vue-material/dist/vue-material.min.css")
import("vue-material/dist/theme/default.css")
},
and finally:
// Adding the SCSS files within the Admin component, which is only rendered if the v-if condition in
// the main App component evaluates to true.
<script>
.
.
.
import "vue-material/dist/vue-material.min.css"
import "vue-material/dist/theme/default.css"
.
.
I initially thought that browser caching might be causing the problem, but even after hard reloading Chrome and trying different browsers, the issue persisted.
Furthermore, commenting out the CSS imports and redeploying did resolve the issue. Therefore, it seems like there is an issue within the Admin component regarding how it imports and applies the styles.
Another puzzling aspect is that I included a console log in the created hook of the component to verify if it was being created unnecessarily, but it wasn't. This leads me to believe that the styles are somehow getting mixed into the build process with everything else.
I am certain that there is a straightforward solution to this problem, but I have exhausted my ideas.