仅在带有vue-cli3项目和vuetify的sass文件中访问$display-interpoints.xs

Question

寻找有关如何在sass文件中使用$display-interpoints.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变量的

在我的例子中，我添加了，但没有确认我需要深入合并和光纤- sass和sass加载器已经安装。

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

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

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

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

现在，在我应得的样式表中，我可以访问变量(如果需要，可以在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对象。

我有两种解决方案，试试这个。

将对断点的媒体查询定义到中。

// 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>

我希望这对你有帮助。