DEV Community

Cover image for How to use Pug & Sass in Webpack 5 - 2022 🐢
Thiago Silva Lopes
Thiago Silva Lopes

Posted on • Edited on

How to use Pug & Sass in Webpack 5 - 2022 🐢

Check on this post the step-by-step you need to configure Sass & Pug.js (previously know as JADE) in Webpack 5 with HMR fully working.

πŸ‘¨πŸ»β€πŸ’» Initialize your project with Webpack 5:

1- Create the package.json for your project:
yarn init -y

2- Install webpack together with his CLI and dev-server:
yarn add webpack webpack-cli webpack-dev-server -D



/* ☝🏽 The -D flag install these as a devDependency. 
Since webpack already compiles & bundle our app for build. */


Enter fullscreen mode Exit fullscreen mode

🎨 Configuring Sass & Pug.js on Webpack:

1- Install the needed Sass dependencies:
yarn add sass sass-loader css-loader -D

2- Install the needed Pug dependencies:
yarn add pug-plugin -D

3- With 'pug-plugin' you can insert your Images, Styles, Fonts & Scripts inside any pug file. With no need to use "require()" in front of href or src path anymore:
Pug code Snippet

4- To make it all work, create a "webpack.config.js" file on the root of your project, & add the following settings on it:



//webpack.config.js
const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
  },
  plugins: [
    new PugPlugin({
      pretty: 'auto',
      //☝🏽 Format HTML (only in dev mode)
      entry: {
        // Insert your PUG templates here
        index: './src/views/index.pug',
        about: './src/views/about.pug'
      },
      js: {
        // JS output filename with hash for unique id
        filename: 'assets/js/[name].[contenthash:8].js'
      },
      css: {
        // CSS output filename with hash for unique id
        filename: 'assets/css/[name].[contenthash:8].css'
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
        //☝🏽 Load Sass files
      },
      {
        // To use images on pug files:
        test: /\.(png|jpg|jpeg|ico)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext]'
        }
      },
      {
        // To use fonts on pug files:
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext][query]'
        }
      }
    ]
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*', 'assets/scss/**/*.*'],
      //☝🏽 Enables live reload in these folders
      options: {
        usePolling: true
      }
    }
  },
  stats: 'errors-only'
  //☝🏽 For a cleaner dev-server run
};


Enter fullscreen mode Exit fullscreen mode

5- Add your Pug files on entry (inside module.exports) & you're ready to go! (you can add more files there later). πŸŽ† The HMR will work for any Pug that imports at least 1 Js file, & all Sass files inside 'src' or 'assets' folder❗ πŸ™ŒπŸΌ

πŸ“š Last but not less important:

You can customize your webpack.config.js and delete or insert anything you like. The code up here it's based on the pug-plugin instructions.

Top comments (10)

Collapse
 
webdiscus profile image
webdiscus • Edited

@all

ATTENTION

In 2024 was released the pug-plugin v5.
NEW version has a lot new cool features and many changes.

Collapse
 
thiagoow profile image
Thiago Silva Lopes

Thanks man!! I really appreciate that you have remembered this article and commented to keep it up to date!

I'll definitely update this article and the repo with your pull request to include the new version :) Thanks a lot mate! 🫢🏻

Collapse
 
webdiscus profile image
webdiscus • Edited

Thanks for a very good step by step guide.

I have one note:
to install Pug dependencies is enough one "pug-plugin", without "pug" module, because "pug-plugin" already contain the "pug" module.

yarn add pug-plugin -D
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thiagoow profile image
Thiago Silva Lopes

Hey mate! Oh thank u so much bro :)
Got it! I will edit the step by step using your note, thanks for the advice! All the best πŸŽ‰

Collapse
 
vladushqqqa profile image
vladushqqqa

Hi, thanks for your article.

There is one problem, live reload works fine, but HMR does not work. For example, I edit some scss-file and after saving the entire page is reloaded, but in a good way this should not be.

github.com/webdiscus/pug-plugin#hm... - this part doesn`t help

Collapse
 
evangeliont profile image
Evangeliont

Thank you bro!

Collapse
 
nikita0x profile image
Nikita0x

Can somebody help please? I am a real beginner, did everything like you wrote above, but it still does not work... Where do I put my pug index file and SASS while? It does not compile it on save...

Collapse
 
thiagoow profile image
Thiago Silva Lopes • Edited

Hi Nikita! All nice? Of course I can help, you can check how I structured my project on my GitHub repo: github.com/Thiagoow/LayoutsUI-PugH...

About compiling when you save, this feature is know as Hot Module Reload, or HMR, in the fifth step of this article I explain that it works for all the pug files that import at least 1 JS file :)

Good luck with your own project, and happy coding! πŸŽ‰πŸ₯³

Collapse
 
dragonir profile image
dragonir

Nice article!

Collapse
 
thiagoow profile image
Thiago Silva Lopes

Thank you a lot mate! 🀩πŸ₯³