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

    },
  },
};

有没有一种方法可以排除Vuetify的_typography.sass？

1 个答案: