How to customize Vuetify?

Question

I am working on something with Vuetify but I struggle to customize components.

In this example I added background-color: red to class rounded-card applied the class in two places but it only worked in v-card-media but the parent component applied only one property, the border-radius one and did not apply the background-color.

Why the style is not applied on both? How am I supposed to customize components styling?

<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

You can pass in custom variables with SASS.

please check official document. https://vuetifyjs.com/ja/customization/sass-variables

1. Add specific libraries to Vue CLI 3

(If you want import material design font library, you need to add font package too => "@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. set the custom variables to SASS/SCSS files.

// 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. Import custom sass file to your Vue components internally

custom sass file must be added above the style tags.

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';` }))
    })
  }
}