vuetify with laravel mix

[jonas201711]

I 'm trying to use vuetify with laravel , it looks working very well. just one issue take me long time to look into, but still unresolved.

when I use the light theme, looks the color of the text was just white. please check enclosed picture. Below is how I customize the theme following the document, but seems the color I specified never take effect.
`
// /resources/js/vuetify/index.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},
});
`

below is the code for a v-steppers, just a copy from the document.

`
<v-stepper
v-model="e6"
vertical

<v-stepper-step
  :complete="e6 > 1"
  step="1"
>
  Select an app
  <small>Summarize if needed</small>
</v-stepper-step>

<v-stepper-content step="1">
  <v-card

    class="mb-12"
    height="200px"
  ></v-card>
  <v-btn
    color="primary"
    @click="e6 = 2"
  >
    Continue
  </v-btn>
  <v-btn text>
    Cancel
  </v-btn>
</v-stepper-content>

<v-stepper-step
  :complete="e6 > 2"
  step="2"
>
  Configure analytics for this app
</v-stepper-step>

<v-stepper-content step="2">
  <v-card
    color="grey lighten-1"
    class="mb-12"
    height="200px"
  ></v-card>
  <v-btn
    color="primary"
    @click="e6 = 3"
  >
    Continue
  </v-btn>
  <v-btn text>
    Cancel
  </v-btn>
</v-stepper-content>

<v-stepper-step
  :complete="e6 > 3"
  step="3"
>
  Select an ad format and name ad unit
</v-stepper-step>

<v-stepper-content step="3">
  <v-card
    color="grey lighten-1"
    class="mb-12"
    height="200px"
  ></v-card>
  <v-btn
    color="primary"
    @click="e6 = 4"
  >
    Continue
  </v-btn>
  <v-btn text>
    Cancel
  </v-btn>
</v-stepper-content>

<v-stepper-step step="4">
  View setup instructions
</v-stepper-step>
<v-stepper-content step="4">
  <v-card
    color="grey lighten-1"
    class="mb-12"
    height="200px"
  ></v-card>
  <v-btn
    color="primary"
    @click="e6 = 1"
  >
    Continue
  </v-btn>
  <v-btn text>
    Cancel
  </v-btn>
</v-stepper-content>

`

below is my webpack.mix.js
`
const mix = require('laravel-mix');
//require('vuetifyjs-mix-extension')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

mix.extend('vuetify', new class {
webpackConfig(config) {
config.plugins.push(new VuetifyLoaderPlugin())
}
})
mix.vuetify()

Mix.listen('configReady', config => {
const scssRule = config.module.rules.find(r => r.test.toString() === /.scss$/.toString())
const scssOptions = scssRule.loaders.find(l => l.loader === 'sass-loader').options
scssOptions.data = '@import "./resources/sass/styles.scss";'
const sassRule = config.module.rules.find(r => r.test.toString() === /.sass$/.toString())
const sassOptions = sassRule.loaders.find(l => l.loader === 'sass-loader').options
sassOptions.data = '@import "./resources/sass/styles.scss"'
});

mix
.options({
extractVueStyles: true,
})
.webpackConfig({

})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/pages/_p_school_profile.scss', 'public/css')
.sass('resources/sass/pages/_p_school_search.scss', 'public/css')
.sass('resources/sass/pages/_p_home_page.scss', 'public/css')
.version();

module.exports = {
//可取值source-map，inline-source-map，inline-cheap-source-map，inline-cheap-module-source-map等等；这里使用source-map
devtool: 'source-map',

};
`

below is the styles.scss under resourse/sass folder.
$font-size-root: 28px; $btn-border-radius: 0px; @import '~vuetify/src/styles/styles.sass'; $material-light: map-merge($material-light, ( cards: lightgrey));

any one can help me on this ?

thank you very much!