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

我想将Vuetify的CSS类用作mixins。为此，我使用了@extends Stylus指令。在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的文档says clearly:



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

有没有办法在不重建每个组件的Vuetify的情况下将Vuetify的Stylus样式用作mixins？

最佳答案

注意:以下应该起作用，但适用于全局样式，而不适用于有范围的样式。

创建您的自定义样式文件(例如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类。

关于webpack - 如何使用Vuetify的Stylus CSS类作为mixins？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51770369/