Bundling Material Design Node Module Components using Hugo Pipes without Webpack

support
4

So, I managed to figure out a way to use MDC in Hugo.

  1. Sass and JS are imported into, say, index.scss and index.js respectively like the MDC documentation says, and placed inside the assets folder:

    .
└── assets
    ├── js
    |   └── index.js
    └── sass
        └── index.scss

  2. In the HTML layout, bundle the sass and js files:

    <!-- inside head -->
{{ $sass := resources.Get "sass/index.scss" }}
{{ $options := (dict "transpiler" "dartsass" "includePaths" (slice "node_modules")) }}
{{ $style := $sass | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
.
.
.
<!-- at the end of body -->
{{ $js := resources.Get "js/index.js" | js.Build }}
<script src="{{ $js.Permalink }}"></script>