寻找一些关于如何在 sass 文件中使用 $display-breakpoints.xxx 的方向。
我使用 vue-cli-3 来设置项目，然后添加了带有点菜选项的 vuetify，我不确定是否应该将文件导入我的样式表。如果需要，也不确定要导入哪个文件。 我得到的错误是 @media
之后的 Expected Identifier文档和各种以前的版本让我对正确的方法感到困惑。
我已经确认 sass 正在编译我的文件并且正在按预期插入（接受所描述的问题） 我试过的是
<style lang="sass" scoped>
@import vuetify/src/styles/styles.sass
.test
color: green
@media $display-breakpoints.xs-only
color: red!important
</style>
【问题讨论】：
标签： vuetify.js
感谢您的建议，但我设法让它按照我想要的方式工作。
步骤基于sass variables
在我的例子中，我添加了但没有确认我需要 deepmerge 和 fiber - sass 和 sass-loader 已经安装。
在 sass 文件夹中创建新文件 main.scss 后，我确实需要编辑我的 vue-config.js 文件并添加 sass 加载器选项。
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 组件的样式表中。
【讨论】：
您不能直接在 CSS 中使用 $vuetify.breakpoint 对象。
我有两个替代解决方案，试试这个。
A.在你的 mixin 中定义断点的媒体查询
// 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>
希望对你有帮助。
【讨论】：