有没有办法排除Vuetify的_typography.sass？

Question

我最近开始使用Vuetify，我正在努力解决类名冲突的问题。.title是特别的一个，因为在使用Vuetify之前，我已经在很多地方使用过.title。很简单，因为这个名字太通用了。我已经找到了一种覆盖它们的方法，但仍然不是很理想，因为从技术上讲，你不能在任何地方使用.title。这很烦人。我发现样式文件来自Vuetify的_typography.sacss：file link。

我想知道是否有一种方法可以通过vue.config.js删除这个文件，或者甚至可以像.title一样重命名/删除类

Answer 1

找到了解决方案。使用postcss-prefix-selector。这个想法来自于https://github.com/vuetifyjs/vuetify/issues/8530

安装postcss-prefix-selector

$ npm install postcss-prefix-selector

在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;
              }
            }
          })
        ]
      }

    },
  },
};