How to prevent Vue global css overwriting itself multiple times

Question

In my vue project I have some globally defined css, like a reset file etc. I load this css using the following in my vue.config:

css: {
  loaderOptions: {
    sass: {
      data: `
        @import "@/assets/styles/styles.scss";
      `,
    },
  },
},

When i look in the browser styles it seems like the css is overwriting itself 50+ times.

I'm wondering what is causing this behaviour?

Answer 1

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'

Answer 2

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');