How to prevent Vue global css overwriting itself multiple times

Your global styles file is being attached before the style block of every component that your router.js is importing.

As a result, there are many definitions of the same css class, which look like they are being overridden.

One simple way to reduce the clutter is to enable lazy loading of the components as has been described in the documentation here -> https://router.vuejs.org/guide/advanced/lazy-loading.html

In order to implement this you would have to alter only the import statements in router.js and absolutely nothing will need to be changed anywhere else.

If I were to give a silly example:

import Foo from "@/src/views/Foo.vue";

would become

const Foo = () => import('@/src/views/Foo.vue');

In your vue.config.js put only variables, mixins, functions.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/sass/_colors.scss";
          @import "@/assets/sass/_variables.scss";
          @import "@/assets/sass/_mixins.scss";
          @import "@/assets/sass/_functions.scss";
        `
      }
    }
}

Now, in styles.scss put your styles, for instance:

@import "reset";
@import "base";
@import "fonts";
@import "z-index";
@import "transitions";
@import "util";

In your main.js import styles.scss

import '@/assets/styles/styles.scss'