I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:

scss/global/swatches.scss:

$swatch-bg: rgba(30,30,45,1);

scss/global/panels.scss

.panel {
    background-color: $swatch-bg;   
}

And then they are both included in my app.scss file:

scss/app.scss:

@import 'global/swatches.scss';
@import 'global/panels.scss';

and then I run:

sass --watch scss:css

This correctly creates all expected files inthe css/folder.

However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.

So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.

How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?

CodePudding user response：

I managed to resolve this by using partials instead in the following manner:

Firstly, rename all my imports to include a prefix, for example:

global/_swatches.scss

and then in my main file (app.scss) import is as follows:

@import 'global/swatches';

Notice the lack of the underscore and .scss file extension