How to include the main style files for development, so that each time they are not imported into other sass files?

Question

Sass

I prescribe sass, scss styles near each component, and it turns out that for each file I need to connect my @mixin and variables in the form - $fz50h: 50px; which are in a separate file, how to connect it for the project? So that each style file does not prescribe a similar construction?

@import '../../css/base/typography'
@import '../../css/base/mixin'

Answer 1

Here I showed how it's done in Vue. VueJS: where is the best place to store css, in .vue components or main.css?
Since the whole point is in setting up a webpack loader, you can also tie it to react

Answer 2

Place the files with the main styles in a folder, for example, "base";
Place files with other styles (modules, components) in another folder, for example, "other";
And at the same level with these folders, create a file, for example style.scss, where import the main style.scss from the base folder and the main style.scss from the other folder.

Answer 3

in app.js