How to compile a separate CSS file, unrelated to HTML?

[binarykitchen]

As mentioned in the Entry Options it has to be a HTML template.

What if you run a full-stack project, having email templates with their own CSS? How to compile their CSS, unrelated to the HTML entry option?

[binarykitchen]

Probably should use your https://github.com/webdiscus/webpack-remove-empty-scripts ?

[webdiscus]

if you compile CSS only (w/o a HTML), you can use this plugin.
This plugin cleans up the output of the buggy mini-css-extract-plugin.

[binarykitchen]

Yes that, I want to compile CSS only w/o HTML.

[webdiscus]

If you render a template into HTML and need to compile a separate CSS (unrelated to a temlate), then you can define in the entry both the template and SCSS/CSS file.

You can see the working example in the test case entry-sass-resolve-url:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
  },

  entry: {
    // compile separate CSS (not used in any template in this config)
    vendor: './src/vendor/style.scss', // => dist/assets/css/vendor.1234abcd.css
    // render the template with related CSS
    index: './src/views/index.html',
  },

  plugins: [
    new HtmlBundlerPlugin({
      css: {
        filename: 'assets/css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [ 'css-loader','sass-loader'],
      },
    ],
  },
};

[binarykitchen]

Well, thanks, but having vendor/style.scss hashed makes it harder to figure out the correct hash in the backend fore injecting it in email templates.

[webdiscus]

you can use the css.filename option w/o hashing assets/css/[name].cs or if you need output CSS filename w/o hashing and CSS-related filenames with hash, use this option as the function. In function you can generate the filename dynamically.

[binarykitchen]

Right. Sounds like a hack and doable. But allow me to double-check: how shall this approach be better than using the webpack-remove-empty-scripts plugin itself?

[webdiscus]

Right. Sounds like a hack and doable. But allow me to double-check: how shall this approach be better than using the webpack-remove-empty-scripts plugin itself?

If your Webpack config doesn't have a template, then you don't need html-bundler-webpack-plugin.

You can compile CSS using mini-css-extract-plugin and webpack-remove-empty-scripts only.

Note: html-bundler-webpack-plugin can't works together with mini-css-extract-plugin.

[binarykitchen]

Noted. My app has a template for the main app (UI), injecting variables at build time and html-bundler-webpack-plugin helped a lot so far, so not going to consider this path.

[webdiscus]

What if you run a full-stack project, having email templates with their own CSS? How to compile their CSS, unrelated to the HTML entry option?

CSS should be injected into email template with <style> tag. The plugin has the css.inline option, you can see How to inline CSS in HTML.

[binarykitchen]

Well, yes and no. My use case is different. Here is a scenario. I run a branded full stack with common colours and logo. They do not change after build. Now:

User submits a new post > form values are passed over API > backend injects them into the email template, including those styles > sends out that email.

My webpack config bundles the whole UI, yet backend needs the compiled CSS with the branding before sending out that email. Hope this makes sense.

That said, I think I should give webpack-remove-empty-scripts a try unless you have a better idea.

[binarykitchen]

For simplicity without adding an extra package, I went for:

   ...
    entry: { index: clientJsEntry, email: emailStyles },
    ...
        css: {
          filename: function (pathData: PathData) {
            if (pathData.chunk?.name === "email") {
              return "css/[name].css";
            }

            return "css/[name].[contenthash].css";
          },
        },

[binarykitchen]

@webdiscus But now, there is a new problem: it does not rebuild when the contents of emailStyles have changed.

[webdiscus]

@webdiscus But now, there is a new problem: it does not rebuild when the contents of emailStyles have changed.

can you please create small repo with reproducible issue?

[binarykitchen]

@webdiscus I figured, I had to add

    devMiddleware: {
      publicPath: wwwDir,
      writeToDisk: true,
    },

to webpack's dev server config. Weird.

[webdiscus]

The bundler plugin works with this configuration:

  // enable live reload
  devServer: {
    static: path.join(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },

Try it, maybe it will solve your problem.

[binarykitchen]

Thanks, but no, this didn't help, but writeToDisk does. Without this, it must be somewhere in memory.