load a CSS file in pug file

[david-fiaty]

How do we load a CSS file in a pug template with this module?

[webdiscus]

@david-fiaty

use the pug-plugin, then you can load JS/TS and SCSS/CSS directly in Pug:

link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))

Pug plugin extract CSS and JS from their sources loaded in Pug.
Generated HTML contains hashed CSS and JS output filenames:

<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>

Specify the Pug files in the Webpack entry:

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    // define your Pug files here
    index: './src/views/home/index.pug',  //=> dist/index.html
    about: './src/views/about/index.pug', //=> dist/about.html
  },
  plugins: [
    new PugPlugin(), // enable rendering of Pug files defined in Webpack entry
  ],
  module: {
    rules: [
      {
        test: /.pug$/,
        loader: PugPlugin.loader, // Pug loader
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
      },
    ],
  },
};

[david-fiaty]

@webdiscus, thanks a lot for the quick answer. I just realised you're on both webdiscus/pug-plugin and pugjs/pug-loader. It's quite confusing but the work is clever, useful and irreplaceable.

I'm on the latest versions of node, npm and pug. I have 2 tasks to perform in my app:
1- Get a .pug file as an HTML string
For this task, pugjs/pug-loader works very well. But webdiscus/pug-loader doesn't.

2- Load a CSS file in a pug template
Your explanations are very clear. However, is there a way to do this work without having to declare pug files in the entry section of the webpack.config.js file? I'm just thinking that the code in your example might become tedious if I have a lot of template files. In the case I'm working on, could I keep my entry declaration as an index.js file and still be able to load any pug file in any CSS file without having to declare the pug files one by one in the entry section?

Great effort, great work. Thanks again!

[webdiscus]

@david-fiaty

I don't use the pugjs/pug-loader, it's is outdated and has a warning by npm i. Instead of pugjs/pug-loader, in pug-plugin is used the much improved @webdiscus/pug-loader.

1. The @webdiscus/pug-loader can get a Pug file as HTLM string. The @webdiscus/pug-loader has 3 methods for Pug compilation:

• compile works same as by pugjs/pug-loader => compile to template function for using with params
• render compiles to exported HTML string, use it if your Pug template has't params.
• html compile to pure HTML string at compile time. Usually used with Vue, Angular.

You can see use examples of the methods.

2. The pug-plugin is designed for using Pug-file as entry-point. The Pug-file must contain all assets (SCSS, JS/TS) in itself, like a native HTML contains CSS, JS. This is "philosophy" of the Pug plugin.
   Therefore, using pug-plugin, the Pug files must be defined in Webpack entry.
   You can define the index.pug as entry-point in Webpack, this index.pug can load a JS file, what can load a Pug template.

The entry-point index.pug.

html
  head
    link(href=require('./styles.scss') rel='stylesheet')
  body
    #root
    script(src=require('./app.js'))

The application JS file app.js

// the pug-plugin use default method `render`, 
// but to load a Pug file in JS as the template function can be used the query param '?pug-compile'
const tmpl = require('./app.pug?pug-compile');

// call template function with props used in template => HTML string
const html = tmpl({
  myString: 'some text...'
});

// AND / OR if your Pug template hasn't props, then load it as HTML string:
const html2 = require('./app.pug');

document.getElementById('root').innerHTML = html;

The template app.pug

h1 Hello Pug!
p= myString

The idea of pug-plugin - avoid to define JS, SCSS files in Webpack entry. For each web page must be defined the Pug file as entry-point. If you has many pages, you can write a function (5 lines code) to dynamic generate entries.

P.S.
don't use the html-webpack-plugin and mini-css-extract-plugin together with the pug-plugin. The pug-plugin replace the functionality of its plugins.

[david-fiaty]

@webdiscus, after declaring an index.pug entry following your webpack.config.js example, the template is loaded.
But if I call a CSS file in the index.pug, the app breaks. No index.html is generated in the dist folder.

I haven't tried to render a pug template yet. I'm just trying to load a CSS file in the index.pug entry file.
My index.pug entry file is in src/tpl/index.pug
In the index.pug file, I call an index.css file in src/css/index.css using link(rel='stylesheet', href=require('../css/index.css'))

Am I missing something?

[webdiscus]

@david-fiaty

can you please create an issue by pug-plugin/issues with a link to your repo, then I can see where is a problem and can help you.

Do you have the module rule for CSS in Webpack?

{
  test: /\.css$/,
  use: ['css-loader']
},

[david-fiaty]

It looks like I was having issues because of trying to render the pug files in an iframe. I opted for a s impler app structure without iframe and it works smoothly now. Thanks a lot for your help.