如何使用 Vuetify 的 Stylus CSS 类作为 mixin？

Question

我想使用 Vuetify 的 CSS 类作为混合。为此，我正在使用@extendsStylus 指令。在MyComponent.vue：

<style scoped lang="styl">
.title {
  @extends .display-3;
}
</style>

正如你所看到的，我没有在每个组件的样式中引入 Vuetify。为了完成这项工作，我将 webpack 配置为在我的应用程序的每个 Stylus 块中加载 Vuetify 的 Stylus 样式。在webpack.config.js：

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          import: path.join(
            __dirname,
            'node_modules/vuetify/src/stylus/main.styl',
          ),
        },
      },
    }),
  ],
};

但是 Vuetify 的文档说清楚：

不要在组件内导入 main.styl。这将导致性能问题并大大减慢热模块重新加载。

看起来我通过这种方式配置 webpack 违反了这个规则。在任何组件上应用每个更改现在大约需要五秒钟。我认为这是因为 Vuetify 正在每个组件中重建。

有没有一种方法可以将 Vuetify 的 Stylus 样式用作 mixin，而无需在每个组件上重建 Vuetify？

Answer 1

注意：以下应该有效，但适用于全局样式，而不是作用域样式。

创建您的自定义样式文件（例如styles/main.styl）

// main.styl 
@import "~vuetify/src/stylus/main.styl";

.my-class {
  @extend .display-3
  color: red;
}

然后，在您最初导入 vuetify 样式的位置，将其替换为新的自定义样式文件的路径。

// main.js (or vuetify.js or wherever you'd imported it)  
import '@/styles/main.styl'

.my-class然后您可以在组件中使用类。