如何更改Vuetify V2中SCSS中的断点

Question

我正在使用SCSS文件，我想更改Vuetify V2中CSS侧的断点。

我在Vuetify升级指南中找不到任何参考。

在1.5版中，我做了style-x.styl：

$grid-breakpoints := {
  xs: 0
  sm: 476px
  md: 668px
  lg: 1000px
  xl: 1300px
}
@import '~vuetify/src/styles/styles.sass';
$material-light.background = #f5f5f5;
@import '~vuetify/src/stylus/main';

然后我导入文件：

import '../style-x.styl';
...
Vue.use(Vuetify);
...

Answer 1

，请查看文档：https：//vuetifyjs.com/en/customization/sass-variables/#vue-cli-install，它说：

安装后，在您的 src目录带有名为variables.scss或variables.sass

的文件

也就是说，在我们使用 vue cli 创建项目之后，我们手动：

1. 可以在我们的 src 文件夹中使用新的 SASS 文件夹。
2. 接下来，在我们的新 sass 文件夹中，创建新的 variables.scss file。
3. 接下来，在我们的新 variables.scss 文件中是Bootstrap-4的标准设置：

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

4. 现在重新启动 npm运行服务，您已经准备就绪。您可以将$网格点变量中的值更改为自己。

Answer 2

对于版本2.0版，您必须通过创建一个自定义的sass文件来更改SASS变量/sass-variables。

对于全球可用的SASS变量，您可以首先

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';
// You need to map-merge your new SASS variables
$grid-breakpoints: map-merge($grid-breakpoints, (
  xs: 0,
  sm: 476px,
  md: 668px,
  lg: 1000px,
  xl: 1300px
))

然后让您的配置文件全局导入变量：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
}

指定VUETIFY选项时，您还必须指定自定义断点：https://vuetifyjs.com/en/customization/breakpoints

//import this into your main.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
  breakpoint: {
    thresholds: {
       xs: 0,
       sm: 476,
       md: 668,
       lg: 1000,
       xl: 1300
    }
  }
})