如何在 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
    }
  }
})