As I develop a project using .vue files, I find it beneficial to have the ability to write CSS (SASS), JS, and HTML all within the same file.
For my global components written in SASS, I have created an assets/styles/app.scss file to house my grid, variables, and mixins.
In addition to the global styles, I also want the flexibility to write local SASS rules specific to each component or page. This seems like a logical approach for any project...
The structure of my local styles looks like this:
<template>
</template>
<script>
</script>
<style lang="scss">
@import "assets/styles/app";
.my-style {
color: $my-variable;
}
</style>
While this setup works, I've realized that as my VueJS project expands with more components, the global styling is loaded redundantly on each one. For instance, the same rule may be duplicated 5x or even 10x according to the Chrome developer tools. Even though it's a small project, having all styles repeatedly loaded by the browser whenever a new component is added to the page is not ideal.
So, how can I prevent multiple loading of global styles while still utilizing them in every component?
This approach of mixing local and global styling is new to me as I previously preferred separating the styling entirely. However, having everything contained locally simplifies the coding process significantly.
What adjustments should I make to optimize the handling of global styles efficiently within VueJS/NuxtJS projects?
https://i.sstatic.net/vzpIw.png
Note: I'm currently working with NuxtJS, but I believe this issue pertains more broadly to VueJS implementation.