VueJS 2 - Невозможно использовать переменные из импортированного файла в файле App.vue

Question

Должно быть действительно простое решение, я все перепробовал.

App.vue file

<style lang="scss" scoped>
 @import 'src/assets/styles/_variables.scss'
 img {
    height: $height;
 }

</style> 

_variables.scss file

height: 27px;

Даже если я перееду img { height: $height; }, я все равно получаю ошибку.Для моей жизни я просто хочу получить доступ к $height из импортированного файла scss.Это должно быть так просто?

ошибка, показанная на этом снимке экрана: снимок экрана с ошибкой Необработанная ошибка:

ERROR in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-06ade8f3","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 
  img {
  ^
      Invalid CSS after "img": expected 1 selector or at-rule, was "{"
      in /Applications/MAMP/htdocs/vuejs-portfolio/src/App.vue (line 63, column 4)

Answer 1

Попробуйте так, это решит вашу проблему.

<style lang="scss" scoped>
 @import 'src/assets/styles/_variables.scss';
 img {
    height: $height;
 }
</style>