How to customize the variables in vuetify in laravel?

Question

I am using vuetify in Laravel. I had created a laravel 8 project with vue version 2 using laravel/ui package. Everything seems to work fine and all the components of vuetify rendered properly. But when I try to change a variable in my variables.scss in resources/sass/variables.scss, It doesn't seems to work accordingly. e.g: when i want to change the default border radius from 4px to let say 10px using $border-radius-root: 6px; as mentioned in vuetify documentation. It doesn't work. Below is my webpack.mix.js

const mix = require("laravel-mix");

require("vuetifyjs-mix-extension");

mix.js("resources/js/app.js", "public/js")
    .vuetify()
    .vue({ version: 2 })
    .sass("resources/sass/app.scss", "public/css");

And my package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.24",
        "deepmerge": "^4.2.2",
        "laravel-mix": "^6.0.39",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.43.4",
        "sass-loader": "^12.3.0",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.14",
        "vuetifyjs-mix-extension": "^0.0.20"
    },
    "dependencies": {
        "@mdi/font": "^6.4.95",
        "@mdi/js": "^6.4.95",
        "material-design-icons-iconfont": "^6.1.1",
        "vue-router": "^3.5.3",
        "vuetify": "^2.5.14",
        "vuetify-loader": "^1.7.3",
        "vuex": "^3.6.2"
    }
}

my app.scss file content

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import url("variables.scss");

my variables.scss content

$border-radius-root: 14px !important;  // this portion didn't work.

and the vuetify.js plugin file content

import Vue from "vue";
import Vuetify from "vuetify";
// To add vuetify css file
import "vuetify/dist/vuetify.min.css";
import colors from "vuetify/lib/util/colors";
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader

Vue.use(Vuetify);

const opts = {
    icons: {
        iconfont: "mdi" || "mdiSvg" || "md",
    },
    theme: {
        themes: {
            light: {
                primary: "#26695C", // #E53935
                secondary: colors.indigo.accent4, // #FFCDD2
                accent: "#BA895D", // #3F51B5
                black: "#000000",
                primaryLight: "#E9F0EE",
            },
        },
    },
};
// primary: "#DB6015", // #E53935
// secondary: colors.indigo.accent4, // #FFCDD2
// accent: "#005677" // #3F51B5
export default new Vuetify(opts);

and I am using the vuetifyjs-mix-extension in my laravel mix configuration.

user_10069002 · Answer

It's a little difficult with the approach you are trying to use for. I can suggest the following one: vuetify.js (imported in the app)

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import es from "vuetify/lib/locale/es";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    // More props here...
  },
  // More stuffs here...
});

webpack.mix.js

const mix = require("laravel-mix");
require("vuetifyjs-mix-extension");

mix
  .js("resources/js/app.js", "public/js")
  .vue()
  // here's where the magic happens.
  .vuetify("vuetify-loader", { extract: "[name].csss" })
  .version()
  .disableNotifications();

Now that you have these settings. Ensure you...

Have the following file: resources/sass/variables.scss
If you have custom fonts, it's preferable that you import them via html rather than here, that's more efficient.

You will be able to see the updates on your code.

Side note: There are my plugins versions:

{
  //...
  "dependencies": {
    //...,
    "vue": "^2.6.12",
    "vue-router": "^3.5.1",
    "vuetify": "^2.5.3"
  },
  "devDependencies": {
    // ...,
    "deepmerge": "^4.2.2",
    "laravel-mix": "^6.0.24",
    "postcss": "^8.2.12",
    "prettier": "^2.2.1",
    "sass": "1.32.6",
    "sass-loader": "^11.0.1",
    "vue-cli-plugin-vuetify": "^2.3.1",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "vuetify-loader": "^1.7.2",
    "vuetifyjs-mix-extension": "^0.0.20"
  }
}

How to customize the variables in vuetify in laravel?

1 Answers