Is there a way to exclude Vuetify's _typography.sass? - vuetify.js

Question

I recently started using Vuetify and I am struggling with the class names conflict. the .title is the particular one, because before using Vuetify I already using .title in many places. Simply because the name is too generic. I have found a way to overwrite them but still not ideal because technicatlly you cannot use .title anywhere. It is annoying. I found the style file is from Vuetify's _typography.sacss: file link.
I am wonder if there is a way exlude this file via vue.config.js, or even possible to rename/remove the classes like .title?

Answer 1

Found the solution. Using postcss-prefix-selector. the idea is from https://github.com/vuetifyjs/vuetify/issues/8530
install postcss-prefix-selector
$ npm install postcss-prefix-selector
In vue.config.js
const prefixer = require('postcss-prefix-selector');
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
/* solving the problem Vuetify's built-in style .v-application .title and others causing conflicts
* with existing title classes. */
postcss: {
plugins: [
prefixer({
prefix: '',
transform: function(prefix, selector, prefixedSelector) {
if (selector.startsWith('.v-application')) {
console.log(selector, prefixedSelector);
}
if (selector === '.v-application .title') {
return `.v-application .v-title`;
}
else if (selector === '.v-application .headline') {
return `.v-application .v-headline`;
}
else if (selector === '.v-application .caption') {
return `.v-application .v-caption`;
}
else if (selector === '.v-application .overline') {
return `.v-application .v-overline`;
}
else if (selector === '.v-application p') {
return `.v-application .v-p`;
}
else {
return prefixedSelector;
}
}
})
]
}
},
},
};