如何在 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 目录中创建一个名为 sass、scss 或 style 的文件夹，并使用名为 variables.scss 或 variables.sass 的文件

也就是说，在我们使用Vue CLI创建项目后，我们手动：

1. 在我们的src文件夹中创建新的sass文件夹。
2. 接下来，在我们的新sass文件夹中，创建新的variables.scss文件。
3. 接下来，在我们新的variables.scss文件中，写下这些行，这些是 bootstrap-4 的标准设置：

*

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

4. 现在重新启动npm run serve就可以了。 您可以将 $grid-breakpoints 变量中的值更改为您自己的值。

Answer 2

对于 2.0 版，您必须通过创建一个自定义 SASS 文件来更改 SASS 变量，您将其导入到 vue.config.js 文件中： https ://vuetifyjs.com/en/customization/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
    }
  }
})