Include scss via hugo module

support
1

I’d like to include modern-normalize.css from GitHub - sindresorhus/modern-normalize: 🐒 Normalize browsers' default style into my styles.scss file. I feel like I’m close, but just not quite there. In config.toml, I’ve set it up as the following:

[module]
[[module.mounts]]
source = "assets"
target = "assets"
[[module.imports]]
path = "github.com/sindresorhus/modern-normalize"
[[module.imports.mounts]]
source = "modern-normalize.css"
target = "assets/scss/_modern-normalize.scss"

When I do that, I get the following error after running hugo serve:

Module “GitHub - sindresorhus/modern-normalize: 🐒 Normalize browsers' default style” not found; either add it as a Hugo Module or store it in “/src/themes”.: module does not exist

I tried the following command: hugo mod get -u and get the following:

go: downloading GitHub - sindresorhus/modern-normalize: 🐒 Normalize browsers' default style v1.0.0
go: GitHub - sindresorhus/modern-normalize: 🐒 Normalize browsers' default style upgrade => v1.0.0

But alas, I had the same error.

After that, I tried hugo mod init github.com/sindresorhus/modern-normalize and it created a new go.mod file that looks like the following:

module github.com/sindresorhus/modern-normalize

go 1.14

Now, when I run hugo server I don’t get any errors!

Now, to import modern-normalize.css. In assets/scss/style.scss, I have the following line:

@import 'modern-normalize';

In my partial, I process and import the css as follows:

{{ $sass         := resources.Get "scss/style.scss" }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts.     := (dict "targetPath" $cssTarget) }}
{{ $css := $sass | resources.ExecuteAsTemplate "main.scss" . | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $css.Permalink | absURL }}" media="screen">

As a result, I get the following error:

Error: Error building site: TOCSS: failed to transform “main.scss” (text/x-scss): SCSS processing failed: file “stdin”, line 1, col 1: File to import not found or unreadable: modern-normalize.

I’m new to modules, so I can’t tell if I’m going about this the right way or not. I’ve also tried different variations of the import (e.g. ./modern-normalize, modern-normalize.scss, modern-normalize.css, etc.). Can someone point out where I’ve gone wrong?

2

Have a read here: Hugo modules for "dummies"

And have a look at my example modules:

The main module

3

Thanks for sending those links. It feels like I’m right there, but just not getting over the hump. Now my issue seems to be with renaming a .css file to .scss.

Here’s my current setup:

config.toml

[module]
[[module.imports]]
path = "github.com/sindresorhus/modern-normalize"
disable = false
[[module.imports.mounts]]
source = "modern-normalize.css"
target = "assets/scss/_modern-normalize.scss"

assets/scss/style.scss

@import  "modern-normalize";

I’ve also tried variations for the import (e.g. ./modern-normalize.scss, _modern-normalize, etc.)

It now builds, but instead of importing the css file and processing it, it processes it as a css file, so it just uses the css import, so in the final css file, I have this at the top:

@import url(/tmp/modules/filecache/modules/pkg/mod/github.com/sindresorhus/modern-normalize@v1.0.0/modern-normalize.css);

Of course, the browser doesn’t know what to do with that, so I get the following error in the console:

Refused to apply style from ‘http://localhost:1313/tmp/modules/filecache/modules/pkg/mod/github.com/sindresorhus/modern-normalize@v1.0.0/modern-normalize.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Also, for full disclosure, I’m running Hugo extended from the klakegg/hugo docker container. Could that be the cause of my problem?

5

Try something like:

[[module.imports]]
  path = "github.com/sindresorhus/modern-normalize"
  disable = false
  [[module.imports.mounts]]
    source = "."
    target = "assets/scss"

@import "modern-normalize";
6

Thanks for the input…Since that repo only has a .css version, I’d like to use the source/target to rename that file to .scss so it can be imported via scss instead of the css import. I thought I had seen somewhere that I could do something like the following:

[[module.imports]]
path = "github.com/sindresorhus/modern-normalize"
disable = false
[[module.imports.mounts]]
source = "./modern-normalize.css"
target = "assets/scss/_modern-normalize.scss"

and it would not only “move” the file, it would also rename it so the .scss extension so that file would go through the scss compiler. Was I mistaken?

7

Was I mistaken?

A mount can only be a folder.

Import the css file as you would import an scss file, without extension:

8

Ugh…I feel like I’m so close on this, but it’s just not coming together.

config.toml:

[module]
[[module.imports]]
path = "github.com/sindresorhus/modern-normalize"
disable = false
[[module.imports.mounts]]
source = "."
target = "assets/scss"

style.scss

@import 'modern-normalize';

Then I get the following error:

Error: Error building site: TOCSS: failed to transform “main.scss” (text/x-scss): SCSS processing failed: file “stdin”, line 1, col 1: File to import not found or unreadable: modern-normalize.

9

That’s not true (at least not for the /assts mount we’re talking about here). The Bootstrap project discovered that by accident …

That said, I would think that this should work:

[[module.imports]]
path = "github.com/sindresorhus/modern-normalize"
disable = false
[[module.imports.mounts]]
source = "modern-normalize.css"
target = "assets/scss/_modern-normalize.scss"

But then I don’t see your whole project.

10

@bep I put together a quick repository to explore this: https://github.com/jloosli/explore-mounts

The README.md file is describing what I’m attempting.

11

@bep I hate to bug you, but I think this would be ideal if I could mount and change the file name/extension. From my perspective, at least for this example, the file gets mounted, but SCSS refers to it as the original css file. I don’t know if that’s a symbolic link issue or scss or on the Hugo side.

I’ve created a simple example at https://github.com/jloosli/explore-mounts that recreates the problem. I’d love any feedback on this that you could provide.

Thank you!

12

I agree, and I would expect what you do to just work, so I must have done something wrong somewhere. I will check.

1 Like