Import global scss variables in app.vue?

[diakonovm]

I want to import global scss into App.vue. The normal scss seems to be fine, but the vue components are not able to access the scss variables. Do I have to import the scss variables into each component? Importing the variables with the @design method works fine, but I would like to keep all my global CSS together under a single directory.

I am following the advice from the documentation that global CSS should only be in src/app.vue.

// src/assets/css/index.scss

// variables
@import 'variables/breakpoints';
@import 'variables/colors';
@import 'variables/fonts';

// base
@import 'base/global';

// objects
@import 'objects/button';
@import 'objects/input';
@import 'objects/textarea';
@import 'objects/typography';

// misc
@import 'misc/utilities';

// App.vue
...
<style lang="scss">
@import '@assets/css/index.scss';
</style>

The vue components are able to use normal css classes from index.scss, but when a component uses a variables such as $breakpoints, I am receiving the following error.

@media (min-width: map-get($breakpoints, medium)) { display: block; }
                              ^
Undefined variable: "$breakpoints".
in /Users/michael/Desktop/development/app/src/router/views/static_pages/index.vue (line 65, column 32)

[chrisvfritz]

Each component is its own SCSS entry file, so you'll have to import those variables into the components you want to use them in. Does that make sense?

[diakonovm]

Yeah, that makes sense. I may be stuck in an asset pipeline Rails way of thinking. Anyway, thanks!