VueJS 2 - Cannot use variables from imported file in App.vue file

Question

There must be a really simple solution I have tried everything.

App.vue file

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

</style>

_variables.scss file

height: 27px;

Even if I move img { height: $height; } I still get an error. For the life of me I just want access to $height from an imported scss file. This must be so simple?

error seen in this screen shot: screenshot of error Raw Error:

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)

PaulShovan · Accepted Answer · 2018-05-11 04:53:21Z

1

Try this way, it will solve your problem.

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

edited May 11, 2018 at 4:53

answered May 10, 2018 at 15:39

PaulShovan

2,1321 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Silva Over a year ago

Ive added a screen shot to the original question

PaulShovan Over a year ago

Please put a semicolon (;) at the end of @import 'src/assets/styles/_variables

Max Silva Over a year ago

gah a simple semicolon

Collectives™ on Stack Overflow

VueJS 2 - Cannot use variables from imported file in App.vue file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related