Javascript 如何在Vuetify中为不同的屏幕大小使用断点？

我尝试更改Vuetify断点，但无效，但出现以下错误：

获取xs:ƒreactiveGetter（） arguments:[异常：TypeError:'caller'、'callee'和'arguments'属性不能在严格模式函数或函数调用的arguments对象上访问。invokeGetter（：1:142）] 调用者：[异常：TypeError:“调用者”、“被调用者”和“参数”属性不能在严格模式函数上访问，也不能在Function.invokeGetter（：1:142）上访问用于调用它们的参数对象] 长度：0 名称：“reactiveGetter”

所以首先要做的是： 根据需要，要更改vuetify默认值的文件必须位于src/sass/variables.sass（或src/scss/variables.scss）中，以便vuetify加载程序使用它

安装后，使用名为variables.scss或variables.sass的文件在src目录中创建一个名为sass、scss或styles的文件夹

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

第三，说明：

如果两个贴图具有相同的键，则第二个贴图的值将在中使用 返回的地图

因此，您要做的是通过将$grid断点作为第二个参数来覆盖您自己的更改。正确的方法是：

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

---

我忘了提到我正在使用Vue CLI和“vuetify”：“^2.2.14”。您需要这个：

$vuetify.breakpoint.xs

（我以

xs

为例）我真的不明白您的意思，您能再详细说明一下吗？

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

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

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