webpack - 如何使用 Vuetify 的 Stylus CSS 类作为混入？

Question

我想使用 Vuetify 的 CSS 类作为混入。为此，我使用了 @extends Stylus 指令。在 MyComponent.vue 中:

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

如您所见，我没有在每个组件的样式中导入 Vuetify。为了完成这项工作，我配置了 webpack 以在我的应用程序的每个 Stylus block 中加载 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 的文档 says clearly :

DO NOT import your main.styl inside of a component. This will cause performance issues and drastically slow down hot module reloading.

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

有没有一种方法可以将 Vuetify 的 Stylus 样式用作混入，而无需在每个组件上重建 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类。