Customizing Vuetify theme doesn't work with Laravel Mix - vuetify.js

Question

I'm building an API interface in VueJS alongside Vuetify in a Laravel package. As per Vuetify docs, I've created a main.styl file containing the main theme stylus file (~vuetify/src/stylus/theme), my overrides and the include of the app file (~vuetify/src/stylus/main.styl) in that order. This should add my colour overrides, however this does not happen.
The stylus file is as follows:
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#import "~vuetify/src/stylus/theme"
$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a
#import '~vuetify/src/stylus/main'
And my webpack.mix.js like so:
const path = require('path')
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix.setPublicPath(path.normalize('public'))
mix.webpackConfig({
output: {
path: path.resolve(__dirname, 'public'),
publicPath: 'vendor/my-package-name/'
},
plugins: [
new VuetifyLoaderPlugin()
],
resolve: { ... }
})
mix.stylus('resources/stylus/vuetify.styl', 'public/css')
mix.js('resources/js/app.js', 'public/js/app.js')
I've tried setting the (in the example set to) $material-theme variable to $material-dark and $theme as well, and neither did not work...
I have made sure to install the whole stylus plugin and such, and yarn does not complain at all when compiling the stylesheet (and it does if I purposely cause an error). However the compiled stylesheet does not contain my changed theme variables. Still, my customisations don't apply at all. The CSS file does not contain my custom colour codes and such.
Does anyone have any idea why this isn't working properly?

Answer 1

I also use Laravel, vue and vuetify framework and the entire process to override your default vuetify variables is quite easy if your understand the setup, in fact you seem to only complicate it with many unnecessary configuration. I rather use npm not yarn but that should make no difference.
So, I would rather do this:
main.styl file looking like:
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a
#import "~vuetify/src/stylus/theme"
#import '~vuetify/src/stylus/main'
And this is my own webpack.min.js don't know why you have excess config!
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/main.scss', 'public/css')
.stylus('resources/stylus/main.styl', 'public/css');
To prevent Vuetify from writing inline styles that could override your main.css, do:
mix.options({
extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
});
So, what changed?
You said you created main.style file but from your webpack.mix.js you are compiling vuetify.styl file into your css.
Your main.styl file should be saved in the path resources/stylus/main.styl
Note: You need to setup stylus-loader since Vuetify is built on top of stylus. If you havn't, in command line, run:
$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev
Also note: Default values for the stylus variables that you wish to change must be declared before the import
Didn't go through your variables list, should be okay though but confirm from this github page https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
Should be okay I believe