时间戳

首页 > 解决方案 > 将 .scss 样式应用于 vuetify 自定义标签

css - 将 .scss 样式应用于 vuetify 自定义标签

问题描述

我的项目中有一个 PageHeader.vue 文件，其中包含来自外部 PageHeader.scss 文件的样式表：

<template>
  <header>
    <v-toolbar
      app
      flat
      style="height: 300px;">
    </v-toolbar>
    <div id="logo"></div>
  </header>
</template>

<script>
  import './../assets/css/PageHeader.scss'
  export default {
    name: 'PageHeader'
  }
</script>

如果我这样做一切顺利，但如果我尝试删除这一行：

style="height: 300px;"

而是使用我的 .scss 文件中的样式，如下所示：

v-toolbar {
  height: 300px;
}

那么我来自 .scss-file 的样式不适用。但如果我预先

v-工具栏

使用点符号（将其视为类，但不像标签名称）效果很好：

.v-toolbar {
  height: 300px;
}

但是我在 .vue 文件中的标记中确实有 v-toolbar TAG，而不是带有“v-loobar”类名的 DIV。有什么方法可以像使用常规 HTML 标签一样使用 vuetify 自定义标签？

标签： cssvue.jssassvuetify.js

解决方案

组件v-toolbar渲染到

<nav class="v-toolbar" ...></nav>

因此，您可以nav使用类似nav.v-toolbar {...}.

推荐阅读