Hugo module import of dart sass css framework

support
,
21

Here’s my example with including bulma as theme module to a site:

git clone --single-branch -b topic-51528 https://github.com/irkode/hugo-forum.git topic-51528
cd topic-51528
hugo

line 10 of public/index.html
<link rel="stylesheet" href="/css/bulma4hugo.min.6f0b---.css" integrity="sha256-bws/KolK---=" crossorigin="anonymous">

Build log 
Start building sites …
hugo v0.124.0-629f84e8edfb0b1b743c3942cd039da1d99812b0+extended windows/amd64 BuildDate=2024-03-16T15:44:32Z VendorInfo=gohugoio
                 | EN
-------------------+-----
Pages            |  5
Paginator pages  |  0
Non-page files   |  1
Static files     |  2
Processed images |  0
Aliases          |  0
Cleaned          |  0

Total in 740 ms
22

You’ve packaged the Sass in the module’s assets directory.

The Bulma library is not packaged that way, and the OP is importing the Bulma library directly.

23

The next release includes a fix for this:
https://github.com/gohugoio/hugo/pull/12850

2 Likes
24

another WOW :rocket: for the team :

This solves the ops use case for importing Bulma:

Hugo ENV (0.135.0-dev) 
hugo v0.135.0-DEV-2bc27657d8b75eabdeaf4df8b354efed8e079169 windows/amd64 BuildDate=2024-09-15T18:32:11Z
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.22.6"
github.com/sass/dart-sass/protocol="2.7.1"
github.com/sass/dart-sass/compiler="1.78.0"
github.com/sass/dart-sass/implementation="1.78.0"[/details]

use Bulma OOTB

needed explicit mount for the bulma.sccs file

  • import & mounts

    [module]
[[module.mounts]]
   source = "assets"
   target = "assets"
[[module.imports]]
   path = "github.com/jgthms/bulma"
   [[module.imports.mounts]]
      source = "sass"
      target = "assets/bulma/sass"
   [[module.imports.mounts]]
      source = "bulma.scss"
      target = "assets/bulma/bulma.scss"

  • partial

    no includePaths opt necessary

    {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/bulma.css" }}
   {{ with resources.Get "bulma/bulma.scss" | toCSS $opts }}
   <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{ end }}

Customize Bulma with SASS

This way the examples on their customizing page work unchanged.

  • omit the mount for the original bulma entry point

    [module]
   [[module.mounts]]
     source = "assets"
     target = "assets"
[[module.imports]]
   path = "github.com/jgthms/bulma"
   [[module.imports.mounts]]
      source = "sass"
      target = "assets/bulma"

  • create a custom scss file in assets/custom.scss

    @charset "utf-8";

$pink: #fa7c91;
@use "bulma/sass" with (
   $primary: $pink,
   $radius: 1.75rem
);

  • adapt the filename in the _partial`

    {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/custom.css" }}
{{ with resources.Get "custom.scss" | toCSS $opts }}
   <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{ end }}
25

You don’t need to do this; you can “resources.Get” the directory index file.

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.imports]]
path = "github.com/jgthms/bulma"

[[module.imports.mounts]]
source = "sass"
target = "assets/sass/bulma"

{{ with resources.Get "sass/bulma/_index.scss" }}
1 Like
26

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.