javascript - 如何在 Vuetify 中针对不同屏幕尺寸使用断点？

Question

我尝试更改 Vuetify 断点，但没有成功，但出现此错误:

获取 xs: ▪reactiveGetter() 参数:[异常:TypeError:“调用者”、“被调用者”和“参数”属性可能无法在严格模式函数或在 Function.invokeGetter 调用它们的参数对象上访问(:1:142)] caller: [异常:TypeError: 'caller'、'callee' 和 'arguments' 属性可能无法在严格模式函数或 Function.invokeGetter (:1:142) 调用它们的参数对象上访问] 长度:0 名称:“reactiveGetter”

//vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
    breakpoint: {
        thresholds: {
            xs: 100,
            sm: 200,
            md: 300,
            lg: 400,
            xl: 500
        },
        scrollBarWidth: 24,
    },
})

//vue.config.js
module.exports = {
  publicPath: process.env.VUE_APP_BASEURL,

  assetsDir: "r",
  devServer: {
    proxy: process.env.VUE_APP_SYSTEM_BASE
  },
  css: {
    extract: false,
    loaderOptions: {
      sass: {
        prependData: `@import "~@/assets/style/sass/vuetify-defaults.scss"`,
      },
    },
  },

} 

/* vuetify-defaults.scss  */

@import "~vuetify/src/styles/styles.sass";

$grid-breakpoints: map-merge( ( 
"xs": 100px, 
"sm": 200px, 
"md": 300px, 
"lg": 400px, 
"xl": 500px), $grid-breakpoints); 

Answer 1

所以首先要做的事情是: 根据vuetify documentation要更改 vuetify 默认值的文件必须位于 src/sass/variables.sass (或 src/scss/variables.scss)中，以便 vuetify-loader 使用它。

Once installed, create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass.

其次，您不需要触摸 vue.config.js 来更改 vuetify 默认值。据我了解，vuetify 加载器适用于直接与 vuetify 相关的任何内容，而 vue.config.js 中的 scss 加载器适用于 vuetify 完成后工作区中的所有 scss 文件。不过，您可以将 prependData 用于您自己的 scss 全局变量。

第三，scss/sass documentaion注释:

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.merge($font-weights, ("extra-bold": 900));
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)

If both maps have the same keys, the second map’s values are used in the map that gets returned.

因此，您要做的就是通过应用 $grid-breakpoints 作为第二个参数来覆盖您自己的更改。正确的做法是:

$grid-breakpoints: map-deep-merge(
    $grid-breakpoints,
    (
        xs: 100,
        sm: 200,
        md: 300,
        lg: 400,
        xl: 500
    )
);