VSCode上で検出されるSassのエラーを解消したい

Question

Nuxtアプリケーションを制作しており、UIにはVuetifyを使用しています。

bodyの背景色を変更するためにvariables.scssにてSass変数を上書きしているのですが、ブラウザ上では思い通りに変更されているものの、エディタ上では構文エラーが検出されます。

)や;が足りないと出ますが、書き足してみても逆にコンパイルできないレベルで構文エラーになるだけで、よくわかりませんでした。原因を教えていただきたいです。

##ソースコード

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

8  $material-light: map-merge($material-light, (
9    'background': var(--v-background-base, map-get($material-light, 'background'))!important,
10 ));

12 $font-size-root: 14px;

##ビルド後のCSS

background: var(--v-background-base, #FFFFFF) !important;

##エラーメッセージ

) expected [9, 81]
semi-colon expected [10, 2]

###nuxt.config.jsでの指定部分

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      options: {
        customProperties: true
      },
      light: true,
      themes: {
        light: {
          background: '#f5f5f5',
          primary: '#00ced1',
          secondary: '#f08080',
          accent: '#9370db',
          error: '#2f4f4f'
        }
      }
    }
  },

Answer 1

variables.scssでスタイルを上書きするのではなく、コンポーネントのv-appタグ内でいずれかのテーマを読み込むように変更しました。

<template>
  <v-app :style="{background: $vuetify.theme.themes[theme].background}" >
    <v-main>
      <nuxt />
    </v-main>
  </v-app>
</template>

<script>
export default {
  computed: {
    theme() {
      return this.$vuetify.theme.dark ? "dark" : "light";
    },
  }
}
</script>