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

因此，请查看文档：{{3}}，上面写着：

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

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

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

*

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

现在重新启动 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
    }
  }
})

如何在vuetify v2中的scs中更改断点？

2 个答案: