Question

正在寻找有关如何在sass文件中使用$ display-breakpoints.xxx的指导。

我使用vue-cli-3设置了项目，然后使用点菜选项添加了vuetify，并且不确定是否应该将文件导入到我的样式表中。另外，如果需要，也不确定要导入哪个文件。我收到的错误是 @media

后的预期标识符

文档和各种以前的版本使我对正确的方法感到困惑。

我已确认sass正在编译我的文件，并且已按预期插入（接受所描述的问题）我尝试过的是

<style lang="sass" scoped>
@import vuetify/src/styles/styles.sass
.test
  color: green
  @media $display-breakpoints.xs-only
    color: red!important
</style>

Answer 1

感谢您的建议，但我设法使它按我希望的方式工作。

步骤基于sass variables

就我而言，我添加了但未确认我是否需要Deepmerge和纤维-已经安装了sass和sass-loader。

在sass文件夹中创建新文件main.scss之后，我确实需要编辑vue-config.js文件并添加sass loader选项。

  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`
      }
    }
  },

然后我将_variables.scss导入到这个新的main.scss文件中

@import '~vuetify/src/styles/settings/_variables.scss';

现在在我的Due样式表中，我可以访问变量（如果需要，可以在main.scss中覆盖这些变量）

<style lang="sass" scoped>
.test
  color: green
  @media #{map-get($display-breakpoints, 'xs-only')}
    color: red!important
</style>

我不会保留这种结构，而是使用混合来创建易于管理和读取的功能，但至少现在我可以访问所需的变量。

我的问题是我试图直接导入Vue组件的样式表。

Answer 2

您不能直接在CSS中使用$vuetify.breakpoint对象。

我有两个替代解决方案，请尝试这个。

A。在混入中为断点定义媒体查询

// e.g. assets/scss/mixin/vuetify-media.scss

$sm-breakpoint: 340px;
$md-breakpoint: 600px;
$lg-breakpoint: 960px;
$xl-breakpoint: 1264px;

// Extra small devices: on screens that are 599px wide or less
@mixin xs {
  @media only screen and (max-width: $sm-breakpoint - 1)
  {@content;}
}

// Small devices: when the width is between 600px and 959px
@mixin sm {
  @media screen and (min-width: $sm-breakpoint) and (max-width: $md-breakpoint - 1)
  {@content;}
}

@mixin lg-up {
...
}
...

<style scoped lang="scss">
@import "@styles/mixin/media.scss";

.test {
  color: red;
  @include lg {
    color: blue;
  }
}
</style>

B。将HTML类绑定到模板中

<div :class="$vuetify.breakpoint.lg ? 'test-lg' : 'test'"></div>

<style scoped lang="scss">
.test-lg {
  color: red;
}
.test {
  color: blue;
}
</style>

希望对您有帮助。

使用vue-cli3项目和vuetify仅在sass文件中访问$ display-breakpoints.xs-only

2 个答案: