Add IncludePaths config option

[grote]

I am importing the material-components-web library like this in my .scss file:

@import "node_modules/material-components-web/material-components-web";

It seems to find the library correctly in my node_modules folder which is in the root of my project. However, this imports sub-libraries that hugo can't find:

error: failed to transform resource: SCSS processing failed: file "/home/user/website/node_modules/material-components-web/material-components-web.scss", line 17, col 1: File to import not found or unreadable: @material/button/mdc-button.

The file node_modules/@material/button/mdc-button.scss exists, but can't be found.

The error message complains about this line in the library:

@import "@material/button/mdc-button";

It seems it doesn't know where to find the @material folder. This works fine with webpack though.

[bep]

In general:

• I have tested this with several SASS frameworks without any issue
• This is powered by LibSASS so you should check their issue tracker

[pamubay]

Because the @import relative path is relative to material-components-web.scss path.

node_modules/
├── @material
│   ├── animation
│   ├── auto-init
│   ├── base
│   ├── button
│   │   ├── mdc-button-scss
│   │   └── ...
│   ├── card
│   └── ...
├── material-components-web
│   ├── material-components-web.scss
│   └── ...
│

you need to change all @import path from @material to ../@material

@import "@material/button/mdc-button";

to

@import "../@material/button/mdc-button";

i believe that @import using @material path is resolved by sass-loader as explained in it's documentation here (P.S. I'm not quite understand npm and nodejs thing though)

[bep]

May also be related to this discussion:

https://discourse.gohugo.io/t/hugo-0-43-tocss-include-path/12820/20

"node_modules" is not a known import in Hugo. Read the above discussion.

[grote]

Thanks for pointing me to this thread. This sounds like the problem I am having as well. With the exception that it seems to find the initial material-components-web.scss file just fine, but not the one that is imported there like this:

@import "@material/button/mdc-button";

This is most likely, because the @material folder is inside node_modules which in turn is not part of the ImportPath.

@pamubay changing all the imports isn't feasible, because they are inside node_modules which is managed by npm. So changed there get overridden with each update.

Managing this SASS dependency with a git submodule instead also doesn't work, because the files there also use the strange @ syntax which isn't even part of their repository folder structure.

[grote]

When trying to compile the SASS locally with

sass themes/test/static/css/styles.scss

it fails like hugo does. But if I add some import paths like so:

sass -I . -I ./node_modules/ themes/test/static/css/styles.scss

It works. So having a feature to provide several paths for a sassInputPath config option would totally solve my issue and make Hugo even more awesome! :)

[bep]

I will have to think a little before I add this.

The niceness of the current restrictions is that it plays nicely with themes; the override paths are obvious and installation is mostly straightforward. node_modules, on the other hand, is usually a dumping ground that I would not love to have in my Hugo project -- and certainly not inherit automatically from some theme I found on the internet. I know about NPM and version lock files etc., but that is kind of what I want to move away from, if I can.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.