Why is the scss variable in the vue component undefined?

Question

Sass

Two scss files are created, variables from the second are imported in the first file, the style.scss file is imported into main.js. But if I declare a variable in the component, the compiler writes that it is not found:

SassError: Undefined variable: "$margin".

If I use this variable in style.scss, everything works. What could be the problem? Styles within a component are not encapsulated.

Answer 1

Take a look at VueJS here: where is it better to store css, in .vue components or main.css?
Variables do not need to be declared in components (only if they are local, purely for this component)
They need to be moved to a separate file and connected to this file globally, via the webpack config
PS/ The config code in that answer may be out of date. Check the option names in the sass-loader documentation.