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

Question

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

我想知道是否有办法通过排除这个文件vue.config.js，甚至可以重命名/删除类.title？

标签： vuetify.js

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

    },
  },
};