How does Hugo know from where to pull SCSS if I have customized versions?

No issue here, just wondering how it works under the hood.

If I use a theme with the following scss: (import statements not shown in preview, click through)

…where it has import statements to pull in supporting scss files, and then I go and make a customized copy of one of those imports and I put it in my root /assets/scss/ folder or wherever that it would mirror the file/folder structure of within the theme… how does Hugo know to use my customized one instead of the standard one from the theme? This isn’t (to my knowledge) like the html template layout order of preference… well it behaves that way but has Hugo been specifically programmed such that any supporting files in scss or maybe javascript (i don’t know) will be pulled in with the same consideration to priority as long as the relative paths match? Cause for the imports that aren’t customized, it knows to get the original location.

If I’m understanding your question (and I did click through :slight_smile: ), it actually does come down to the template layout order — because, in the end, that’s still where the CSS/SCSS gets called. So if you want to override your theme, you’d call the preferred CSS/SCSS from a “higher” place in the layout order.

Since that was too simple, I’m probably not understanding your question. Sorry. :man_shrugging:

As to SCSS (and JS and CSS works the same too) the imports resolution is “all” about

  1. the relative path inside /assets (which you can control with mounts)
  2. the ordering of the mounts (the project will always win)

One example would be:

so what gets presented to the compiler for paths to search for their dependencies is based on the Hugo priority? aka Hugo serves up the project before the theme to the compiler

it hints at it but doesn’t quite get to the root as to how it’s done with the compiling of resources compared to the algorithmic process of hugo itself pulling templates in the right order.

Both SCSS implementations (libsass and Dart Sass) has a concept of custom import resolvers, which allows Hugo to resolve imports against its union file system. If we don’t succeed, we will let “them” do it.

1 Like

Very cool. Thank you for the insight!

I can add that js.Builds works the same way, which I find incredibly useful.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.