No stylesheet in html with html-webpack-plugin

[TommasoAmici]

Hi, sorry but this is more of a question than a bug report.

I'm using @beyonk/google-fonts-webpack-plugin in combination with html-webpack-plugin. Is there any way to output a <link> tag with the fonts.css stylesheet in my html?

My webpack.config.js is something along these lines:

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin");

module.exports = env => {
  return {
    entry: { index: "./src/index.ts" },
    plugins: [
      new GoogleFontsPlugin({
        fonts: [
          {
            family: "Open Sans",
            variants: ["400", "600", "700"],
          },
        ],
      }),
      new HtmlWebpackPlugin({...}),
    ],
  };
};

I've tried switching the order of the plugins, but that didn't change anything.

[antony]

I'm afraid I don't use Webpack any more so I don't know. I'll leave this open and label it and perhaps somebody else can help :)

[upalatucci]

It should add the link to the html file. I have defined a filename in googlefrontplugin configuration and it change also in the html file. The default value is font.css If it doesn't works, you can use the htmlwebpackplugin variables.

const fontPath = "style/font.css" 

module.exports = env => {
  return {
    entry: { index: "./src/index.ts" },
    plugins: [
      new GoogleFontsPlugin({
        fonts: [
          {
            family: "Open Sans",
            variants: ["400", "600", "700"],
          },
          filename: fontPath
        ],
      }),
      new HtmlWebpackPlugin({
          templateParameters: {
            fontPath
         }
      }),
    ],
  };
};

and in the html

  <link rel='stylesheet' href='<%= fontPath %>' />