重写Vuetify变量

Question

当试图重写SASS变量时，应该导入缩小的.css文件吗?

我跟踪了这个https://vuetifyjs.com/en/getting-started/installation/#webpack-install

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

现在我试图覆盖$body-font-family，但没有成功，我尝试创建一个variables.scss文件，也尝试在我的主.scss文件中重写它，但是我想知道我是应该像这样导入小型化版本，还是需要做一些不同的事情？

Answer 1

要覆盖vuetify变量，只需在src中创建一个名为scss的目录，并在其中创建一个名为variables.scss的文件。

在该文件中，您可以在不导入任何内容的情况下更改变量。

例如，我的variables.scss

$container-max-widths: (
  md: 100%,
  lg: 1200px,
  xl: 1200px
);

$btn-text-transform: none;

$dialog-card-subtitle-padding: 0 56px 20px;
$dialog-card-title-padding: 36px 56px 10px;
$dialog-card-actions-padding: 8px 56px 36px;
$dialog-card-text-padding:0 56px 20px;