Vue 3与Vuetify 3组件中如何访问SCSS/SASS全局变量？

你在Vue 3组件的scoped样式中使用Vuetify的$red变量时触发了SassError: Undefined variable.错误，这是因为组件的scoped样式默认无法直接访问Vuetify的全局Sass变量，需要手动导入对应的变量文件，具体操作分版本：

Vuetify 3 版本 #

在组件的scoped样式开头导入Vuetify的全局变量文件：

@use 'vuetify/settings';

修改后的完整样式代码：

<style lang="scss" scoped>
@use 'vuetify/settings';

.img-container {
  aspect-ratio: 3 / 2;
  margin-left: auto;
  margin-right: auto;
  background: $red;
}

.text-small {
  font-size: 2em;
}
</style>

Vuetify 2 版本 #

导入路径有所区别，可选择导入完整样式文件：

@import '~vuetify/src/styles/styles.sass';

或者仅导入颜色变量文件：

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

导入完成后，组件就能正常识别Vuetify预定义的所有全局Sass变量，包括颜色、字体、间距等。

内容的提问来源于stack exchange，提问作者schnawel007