Hugo 0.43 toCSS include path

I’m using npm to get some sass dependencies. I quick looked the hugo source (0.43) and found that toCSS is setting the include path as the sass file directory so currently there isn’t a way to set the include path. Am I right? Am I missing something or it isn’t implemented yet?

Edit: It is being considered Add IncludePaths config option · Issue #4921 · gohugoio/hugo · GitHub

Edit 2: Implemented in Hugo 0.45, check the docs for more info SASS / SCSS | Hugo

You are right, but why do you need this? I thought about adding this as an option, but need a real Hugo use case. And remember, this isn’t a “general purpose SASS processor”. It works with the “Hugo file system”, and you have not shown me a use where a main.scss can not import just about anything.

I’m not sure what you mean with “Hugo use case” and “Hugo file system”. So basically I don’t understand what you are saying :frowning:

Let me explain a bit more what I’m talking about.

I’m using Bulma which is a CSS framework customizable via sass. I get Bulma with npm and is installed at ./node_modules. I customize Bulma with my main.scss file. When using toCSS in the new 0.43 hugo release, hugo doesn’t find Bulma because I cannot add ./node_modules to the include path.

A use case I could see is eventually expanding out of SASS/SCSS and be able to use some kind of PostCSS framework like Tailwind’s. And it’s obviously a couple years away, but the next version of Bootstrap hints that it will be moving away from SCSS onto PostCSS.

Why do you need to modify the import path? You can import by using “…/somepath” etc.

Because is kind of hackishy. If I move the my main file I would have to change all the import paths. It is much cleaner to have all the imports paths as “bulma/sass/…” regardless the main file location.

So what you’re talking about is basically being able to specify multiple directories that are essentially combined into a single directory. Maybe something like this in the configuration:

assetDirs: ["assets", "node_modules"]

But that means that you’re making Hugo watch over your entire node_modules directory (bad) and then it’s not clear how collisions would be handled, e.g. if there’s a assets/sass/styles.sass and node_modules/sass/styles.sass. In general I think it’s vastly preferred to have a single, canonical assets directory that Hugo watches for changes. I guess I’m just not really seeing a problem with this:

@import "../../node_modules/bulma/bulma"

We currently add the base dir of the entry file for the project and the theme(s) below ONE assets /dir – for good reasons. It means that you get a consistent view with a well defined import/override order.

We may consider adding import paths inside /assets, but I don’t see that expanding to random locations on the disk. You may create symbolic links to your node_modules if you really want to.

I’m not saying this. I’m saying being able to add a folder to the include path. That doesn’t mean combining multiple folders into one.

If you can resolve the files being included you can resolve the full paths, watch those files only and no collisions exists. So no issues here.

So basically the users or CI servers are forced to put all the scss files inside assets?

No, you don’t need to build any SASS files once you are “done with design”. Rebuilding the CSS on CI ever time you do a content update sounds really wasteful – and hacky. So a Git submodule with your framework of choice should work nicely.

That said, this is a new feature and it will certainly change/improve once people start using it. But your problem sounds a little bit artificial.

Maybe I’m missing something, @butaca, but why not just install node_modules into your assets folder? Can’t you then access it the same way you would any other .scss in that folder?

I agree. But for small sites it is much simpler and enough.

I’m not asking for a new feature and didn’t say I have a problem. I was just asking if I could change the include path… :sunny:

I thought of that, but it is recommended to keep the node_modules directory as it is.

I know, I know…

My use case doesn’t justify this feature to be added. I was just asking.

Thanks everyone for your responses.

Nah, there will probably be more people asking for the same thing in the days to come. And then it may become a use case.

Sorry, I meant not changing anything within node_modules and instead just doing your npm install while your pwd is assets, but now that I think about it, that might make your .gitignore a little tricky for any automation. As I thought, I was definitely missing something :smile:

material.io require to add includePaths: https://material.io/develop/web/docs/getting-started/#step-2-include-css-for-a-component