0

I would like to add some styles to some components for example v-chip I want to add some padding globally. I do not want to do it, or import a style file on each component that uses v-chip. I tried to add the styles to variables.scss it works fine but violate the caveats https://vuetifyjs.com/en/features/sass-variables/#caveats that produces duplicate css. Created a overwrites.scss file and add to it dose not work neither. Please if anyone know how to achieve it?

Arst
  • 3,098
  • 1
  • 35
  • 42

1 Answers1

0

According to caveats CSS duplication is happened when you import any other stylesheet into variables.scss. As far as I understand, there is no any duplication happened when you haven't imported any CSS file. So, to configure variables in variables.scss is a good way to configure global styles.

If you need to configure styles which have no applicable variable (or you just prefer this way of styles configuration) you can:

a. Create your own component (e.g. XChip.vue) as a wrapper for v-chip.

<!-- XChip.vue -->
<template>
  <v-chip v-bind="$attrs" v-on="$listeners">
    ...
  </v-chip>
</template>

b. Add necessary styles in this component

<style scoped>
  ...
</styles>

c. Then use it everywhere in your project when you need a chip.

You can find more information how to pass down slots here: Vue - how to pass down slots inside wrapper component?