DEV Community

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

Posted on • Updated 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 pug-plugin -D

3- With 'pug-plugin' you can insert your Images, Styles, Fonts & Scripts inside any pug file. Just use "require()" in front of href or src path:
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 = {
  entry: {
    index: './src/views/index.pug',
    about: './src/views/about.pug'
    //☝🏽 Insert your PUG HTML files here
  },
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
    filename: 'assets/js/[name].[contenthash:8].js'
    //☝🏽 Output filename of files with hash for unique id
  },
  plugins: [
    new PugPlugin({
      pretty: true,
      //☝🏽 Format HTML (only in dev mode)
      extractCss: {
        filename: 'assets/css/[name].[contenthash:8].css'
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader
        //☝🏽 Load Pug files
      },
      {
        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: {
      directory: path.join(__dirname, 'dist')
    },
    watchFiles: {
      paths: ['src/**/*.*', 'assets/scss/**/*.*'],
      //☝🏽 Enables HMR 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.

Discussion (3)

Collapse
dragonir profile image
dragonir

Nice article!

Collapse
thiagoow profile image
Thiago Silva Lopes Author

Thank you a lot mate! 🀩πŸ₯³

Collapse
webdiscus profile image
webdiscus • Edited on

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