如何自定义 Vuetify？

Question

我正在使用 Vuetify 做一些事情，但我很难自定义组件。

In this example I added background-color: red to class rounded-card 在两个地方应用了这个类，但它只在 v-card-media 中有效，但父组件只应用了一个属性，即边框半径一个并且没有应用背景-颜色。

为什么两种样式都没有应用？我应该如何自定义组件样式？

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card flat class="rounded-card">
          <v-card-media
            class="white--text rounded-card"
            height="200px"
            src="https://vuetifyjs.com/static/doc-images/cards/docks.jpg"
          >
            <v-container fill-height fluid>
              <v-layout fill-height>
                <v-flex xs12 align-end flexbox>
                  <span class="headline">Top 10 Australian beaches</span>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-media>
          <v-card-title>
            <div>
              <span class="grey--text">Number 10</span><br>
              <span>Whitehaven Beach</span><br>
              <span>Whitsunday Island, Whitsunday Islands</span>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="orange">Share</v-btn>
            <v-btn flat color="orange">Explore</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

#app{
  padding-top:1em;
}

.rounded-card{
  border-radius:50px;
  background-color: red;
}

Answer 1

您可以使用 SASS 传入自定义变量。

请查看官方文档。 https://vuetifyjs.com/ja/customization/sass-variables

1。将特定库添加到 Vue CLI 3

(如果要导入material design字体库，也需要添加字体包=>"@mdi/font": "^3.9.97")

$ npm install sass sass-loader deepmerge -D
// or
$ yarn add sass sass-loader deepmerge -D

// package.json
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.9.0",
  "@vue/cli-plugin-eslint": "^3.9.0",
  "@vue/cli-service": "^3.9.0",
  "sass": "^1.18.0",
  "deepmerge": "^4.0.0",
  "sass-loader": "^7.1.0"
}

2。将自定义变量设置为 SASS/SCSS 文件。

// src/sass/main.scss

@import '~vuetify/src/styles/styles.sass';


$font-size-root: 16px;
$body-font-family: Arial, Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic Pro", sans-serif;

$material-light: map-merge($material-light, (
  'background': white
));

@import '~@mdi/font/scss/materialdesignicons';

3。在内部将自定义 sass 文件导入到您的 Vue 组件中

自定义 sass 文件必须添加到样式标签上方。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
    })
  }
}