Cannot @import bootstrap from scss file that isn't main.scss

support
1

I have bootstrap working in a custom theme but cannot import unless the import is in main.scss:

this works:

theme/assets/sass/main.scss

@import "overrides.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";

but this doesn’t:

theme/assets/sass/overrides.scss

@import "node_modules/bootstrap/scss/functions";

“File to import not found or unreadable: node_modules/bootstrap/scss/_functions.”

If I put it in main.scss it imports but overrides.scss can’t see anything in it such as

"Undefined variable: “$grid-breakpoints”

overrides.scss can see variables such as $primary and $secondary but nothing in any other bootstrap import coming from main.scss.

Is there a better way to override bootstrap styles in a Hugo theme?

2

it all works if everything is in main.scss and in the correct order:

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/utilities";
@import "overrides.scss";

just wondering why I can’t @import from overrides.scss.

3

It seems import works only for the resource your are getting( main.scss ).

4

The above looks right to me; overrides should be last, not first.

Given the example above, what do you want to import inside of overrides.scss, and where is the imported file located?