Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ToCSS includePaths ignores paths from parent directory (../node_modules) #6274

Open
0xjac opened this issue Aug 27, 2019 · 5 comments

Comments

@0xjac
Copy link

commented Aug 27, 2019

Error

When running hugo, it fails with the following error:

hugo -D -s site server     
Building sites … ERROR 2019/08/27 16:56:32 error: failed to transform resource: SCSS processing failed: file "stdin", line 3, col 1: File to import not found or unreadable: bulma/bulma. 
Total in 13 ms
Error: Error building site: logged 1 error(s)

Project Structure (abridged)

project
├── node_modules
│   └── bulma
│       ├── bulma.sass
│       └── sass
│           └── ...
├── package.json
├── package-lock.json
├── README.md
└── site
    └── themes
        └── custom-theme
            ├── assets
            │   └── scss
            │       ├── main.scss
            │       └── variables.scss
            └── layouts
                └── _default
                    └── baseof.html

project/site/themes/custom-theme/assets/scss/main.scss

@charset "utf-8";
@import "variables.scss";
@import "bulma/bulma";

// custom style ...

head

<head>
    {{ $scssOptions := (dict "targetPath" "css/styles.css" "enableSourceMap" false "includePaths" (slice "../node_modules")) }}
    {{ $scssFile:= default "scss/main.scss" .Params.ScssFile}}
    {{ $scss := resources.Get $scssFile }}
    {{ $style := $scss | resources.ToCSS $scssOptions | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">
    <!-- ... -->
</head>

Hugo Versions

  • Hugo Static Site Generator v0.55.6-A5D4C82D2/extended linux/amd64 BuildDate: 2019-05-18T08:08:34Z
    
  • Hugo Static Site Generator v0.56.3/extended linux/amd64 BuildDate: unknown
    

OS

cat /etc/lsb-release 
DISTRIB_ID=ManjaroLinux
DISTRIB_RELEASE=18.0.4
DISTRIB_CODENAME=Illyria
DISTRIB_DESCRIPTION="Manjaro Linux"

Notes

I tried playing with various variations of paths in the head (such as node_modules, ./node_modules, absolute path, ...) and in main.scss (such as ./bulma/bulma, ../bulma/bulma, ...) and nothing works. The only way around is to not use incluePaths and instead to hard-code node_modules in the scss file, as in: @import './node_modules/bulma/bulma';.

Note that using includePaths as described in this setup works fine with the following hugo version:

Hugo Static Site Generator v0.55.6-A5D4C82D2/extended linux/amd64 BuildDate: 2019-05-18T08:08:34Z
@bep

This comment has been minimized.

Copy link
Member

commented Aug 27, 2019

This is possibly a bug introduced by my 0.57 changes. That said, I think you would get a simpler setup/easier to reason about if you use the new module mounts setup.

E.g. (from memory):

[module]

  [[module.mounts]]
    source = "node_modules/bulma"
    target = "assets/scss/bulma"

If you get those paths in line you should not need to add any includePaths.

@bep bep added this to the v0.58 milestone Aug 27, 2019

@0xjac

This comment has been minimized.

Copy link
Author

commented Aug 27, 2019

@bep Thanks I was looking into it and it does indeed look like the introduction of modules might have interfered with this feature. You suggestions to use modules (which is a really cool new feature btw) works!

Specfically (and for anyone stumbling upon this) the corrrect configuration is:

[module]

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "../node_modules/bulma"
    target = "assets/scss/bulma"

I had to mount the static folder explicitly (not sure if that's intentional or not, but it may be because I have a target of static/webfonts as well in my project) and the source path for the node modules has to start with ../ since the folder is located in the parent of the site in my setup.
You can check the working setup here.

For me this is a perfectly acceptable solution. I find it much cleaner and explicit than passing the node_modules folder in the head template. That being said, it may be nice to update the SASS/SCSS documentation to let people know of the changes.

@bep

This comment has been minimized.

Copy link
Member

commented Aug 28, 2019

That being said, it may be nice to update the SASS/SCSS documentation to let people know of the changes.

I agree. It would be cool if you could lend us a hand, now that you know how it works... But I will fix this particular issue, as this was an unintended side effect. But I do agree that using the file mounts is a cleaner and easier to reason about solution. And it gets even cooler when you mount folders inside other GitHub projects ...

@bep bep modified the milestones: v0.58, v0.59 Sep 3, 2019

bep added a commit that referenced this issue Sep 3, 2019
@bep

This comment has been minimized.

Copy link
Member

commented Sep 3, 2019

I tried to create a failing test similar to your setup, but I failed (or succeeded ...). Which means that there is something I'm not seeing in your setup ...

@0xjac

This comment has been minimized.

Copy link
Author

commented Sep 4, 2019

Hi sorry for the late reply. I can do a simple set up for testing. I am also happy to lend an hand.

Which approach do you prefer:

  1. Prevent adding paths past the root, display an error message and update the doc?
  2. Fix the logic to restore the old behavior?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.