laravel如何自定义vuetify中的变量？

Question

我在 Laravel 中使用 vuetify。我使用 laravel/ui 包创建了一个带有 vue 版本 2 的 laravel 8 项目。一切似乎都运行良好，并且 vuetify 的所有组件都正确呈现。但是当我尝试在resources/sass/variables.scss 中更改我的variables.scss 中的变量时，它似乎没有相应地工作。例如：当我想使用 $border-radius-root: 6px; 将默认边框半径从 4px 更改为 10px 时，如 vuetify 文档中所述。它不起作用。下面是我的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");

还有我的 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"
    }
}

我的 app.scss 文件内容

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

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

我的 variables.scss 内容

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

以及 vuetify.js 插件文件内容

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);

我在我的 laravel 混合配置中使用 vuetifyjs-mix-extension。

Answer 1

您尝试使用的方法有点困难。我可以建议以下一个： vuetify.js（应用内导入）

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();

现在您已经有了这些设置。确保您...

1. 有以下文件：resources/sass/variables.scss
2. 如果您有自定义字体，最好通过 html 导入它们而不是在这里导入，这样效率更高。

您将能够看到代码的更新。

旁注：有我的插件版本：

{
  //...
  "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"
  }
}