Nuxtjs VueMeta css order

Question

I am currently loading a main stylesheet via the css prop within the nuxt.config.js I wish to load in some other styles to overwrite some of those in the main css.

I would like to be able to define those within the head() of a layout so that I can add the styles dynamically like so:

head () {
  const style = [
    { cssText: this.customStyles, type: 'text/css' }
  ]

  return {
    style
  }
}

But this always loads before the main styles are added and as such are not being used to overwrite the styles.

I tried to set the style to be injected into the body but that does not work either.

Maybe I need to compile the sass separately and then include it as a file in the above head() tag.

Does anyone have any insight to how I might achieve this without having to have a separate build process?

Thanks