Bundling Material Design Node Module Components using Hugo Pipes without Webpack

[edxe47]

I’m pretty new to web development and I’m trying to build a static blog from scratch with Hugo, in which I wanna use Google’s Material Design Components.

They recommend using their node modules and bundling the Sass & JS using Webpack in their “Getting Started” page.

The steps on that page (and their Codelabs Tutorial) don’t work out right away, so I tried to learn some Webpack basics, and managed to write this webpack.config.js which makes the components work (i.e., in a basic static site without Hugo):

const path = require("path");
const autoprefixer = require("autoprefixer");
const loader = require("sass-loader");

module.exports = {
    entry: "./src/index.js",
    devServer: {
        static: "./dist",
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [autoprefixer()],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),
                            webpackImporter: false,
                            sassOptions: {
                                includePaths: ["./node_modules"],
                            },
                        },
                    },
                ],
            },
        ],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
    },
};

I decided to set up a project with Hugo, npm, and Webpack. But I’m using npm ONLY for using those Material Design Components, and Webpack seems like overkill, given that the rest of my site functions perfectly using Hugo Pipes.

Question: How do I use MDC components in a Hugo project?

(i.e., is it possible to do what this webpack.config.js does by only using Hugo Pipes?)

Can someone please guide me on how to do it (or give any alternatives)? Sorry for the long post, and sorry if this is a noob question.

[davidsneighbour]

Looking at your webpack.config.js I think you might see Webpack only as some form of “importer and concatenator of javascript”. Which is only half or even a much smaller part of the truth. You could create multiple files so that your site loads faster and only those JS files it really requires, you could add image optimisation, font optimisation, css… bla bla bla.

Having gotten that off my chest You probably can do the whole import and minimise/optimise thing for your Javascript with Javascript Processing in Hugo.

JavaScript Building

It’s a bit complicated with paths, but if you have your node modules in the root directories node_modules then it should/might work out of the box.

Under the hood ESBuild is used:

https://esbuild.github.io/

Another option would be Babel, if you know that?

[edxe47]

The webpack.config.js is bare minimal because (1) the only thing I need webpack to do in this project is to bundle the material design components, as recommended in the MDC documentation (in an otherwise perfectly functioning site that uses nothing outside of hugo pipes), and (2) I’m new to webdev… both of which I believe I mentioned clearly.

I don’t want to use webpack just to bundle these components unless it’s absolutely impossible (or inefficient) to do it using hugo pipes.

Now that you mention it may be possible, guess I’ll have to look for someone who has experience with MDC if it’s possible to bundle it with ESBuild (…or Babel, which needs to be npm install-ed separately)

[edxe47]

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>