vue使用Vuetify-sass变量配置

官网sass配置文档-SASS 变量 — Vuetify

Vue CLI 安装

使用vue add 按照后，会自动帮你安装好loader，这时你只需要在src下安装创建一个名为sass或者styles目录，文件名为 variables.scss 或 variables.sass。vuetify-loader 会自动将你的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。

vue add vuetify

// src/sass/variables.scss

// 全局变量
$body-font-family: 'Work Sans', serif;
$app-bar-elevation: 4px;

$btn-sizes: (
  'default': 141,
  'large': 154
);

 配置完后按钮修改了默认141也生效了

但是随着项目进展修改的配置也越来越多，这时发现开发模式下，只要修改了variables配置，vuetify-loader会重新把配置编译应用，这让整个项目修改的时候热更新异常缓慢。改用webpack引入配置同样也试很慢。官方在文档最后也给出了合理的解释（wtf）。

 最后我放弃了，选择了原始而又暴力的手段解决，直接在我自己的scss文件下重置他类名样式，简单又快捷：

/*myscss.scss*/
$card-title:rgba(0,0,0,0.8);
$form-value:#394047;


.theme--light.v-card{color: $card-title;}
.v-form .v-input{font-size: 14px;}
.v-text-field--enclosed .v-input__prepend-inner{margin-top: 8px;}
.theme--light.v-input, 
.theme--light.v-input input, 
.theme--light.v-input textarea{
    color: $form-value;
}
.v-image__image--preload{filter: none;}
.v-input--selection-controls{padding-top: 0;}