How to avoid Vuetify overrides default CSS

Question

Summarize the problem

I am trying to implement the Vuetify to a part of an existing project. But after I added Vuetify to the Project. I found out that the "default" CSS styles for like input field, select are changed. And it makes those input field and select all look like plain text rather than input field and select.

Because I only want to implement the Vuetify for a part of the project, so it is bad that the Vuetify overrides the "default" CSS Rules.

I am looking for a way to implement the Vuetify for a part of an existing project. But the rest of the project should be rendered as normal (just with default CSS, not my own CSS).

To make the Qustion more clair, I will put an example which shows two selects. The first one is made with Vuetify <v-select> and the second one is made with normal HTML code <select>

Provide background and tell us what you've already tried

I have already tried to put custom CSS rules for input field and select after the Vuetify Script and Vuetify CSS link. But Vuetify still overrides my custom CSS-Styles.

Show your code

HTML PART:

<div id="app">
  <div>Vuetify select:</div>
  <v-select
    :items="items"
  >
  </v-select>
  <hr/>
  <div>
    <div>Normal select:</div>
    <select>
      <option value="0">test1</option>
      <option value="1">test2</option>
      <option value="2">test3</option>
    </select>
  </div>
</div>

JS PART:

new Vue({
  el: '#app',
  data() {
    return {
      item: null,
      items: [
        {
          text: "a"
        },
        {
          text: "b"
        },
        {
          text: "c"
        },
      ]
    }
  }
})

Describe expected and actual results

I expected that I can use Vuetify for some parts of this project. But in the meanwhile, the rest of the project should be acting just like normal (with default CSS).

mcmimik mcmimik · Accepted Answer · 2020-04-15T19:23:44

This is caused by the Vuetify reset styles (src/styles/generic/_reset.scss).

There is also an issue for that problem: https://github.com/vuetifyjs/vuetify/issues/8530. You can find there a little postcss hack from mkalus that isolates necessary styles via the wrapper (adding the prefix class to selectors).

In my case I just needed to remove some element selectors, excluding those that I added myself. So this is my variation of mkalus's solution with the postcss-filter-rules plugin.

I used the filter option to filter selectors. Its description:

Selectors are kept if the function returns true, otherwise they are removed.

And the keepAtRules option to prevent unnecessary deletions:

By default, @font-face and any empty at-rules (after filtering) are removed. To keep specific at-rules, provide an array of names to this option. To keep all at-rules, use the value true.

vue.config.js (Vue CLI 4):

const autoprefixer = require('autoprefixer')
const filterRules = require('postcss-filter-rules')

module.exports = {
  /* ... */
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          filterRules({
            filter: (selector) => {
              const re = new RegExp(/^(html|body|\*|ul|ol|select|small)(\W|$)/, 'i')
              const exception  = '.vue-global'
              return !re.test(selector) || selector.includes(exception)
            },
            keepAtRules: true
          }),
          autoprefixer
        ]
      }
    }
  }
  /* ... */
}

Now that I've removed some Vuetify reset styles, I can still style html and other elements like this:

html.vue-global
  font-size 16px