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?
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
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.
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:
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.
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.
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?
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