[SOLVED] CSS not included in index.html

CSS not included in index.html

I have this webpack.config.js:

const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [{
entry: ['./app/clientside/app.scss', './app/clientside/app.js'],
plugins: [
    new HtmlWebpackPlugin({
        title: 'Caching',
    }),
],
output: {
path: __dirname + '/private_html/_app/dist',
publicPath: '',
filename: '[contenthash].bundle.js'
},
module: {
rules: [
  {
    test: /\.scss$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[contenthash].bundle.css',
        },
      },
      { loader: 'extract-loader' },
      { loader: 'css-loader' },

                { loader: 'postcss-loader',
                    options: {
                         plugins: () => [autoprefixer()]
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        implementation: require('sass'),
                        sassOptions: {
                            includePaths: ['./node_modules']
                        }
                    }
                },
    ]
  },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
    },
     ] },
}];

The css and js files are generated, but in the index.html only the js file is included:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caching</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script src="dd9a13efe757661de1fe.bundle.js"></script>
</body>
</html>

I expected to have link-element referencing the css file. I tried google but can't seem to find the right direction/ keywords. How do I fix this?

Solution

I would probably consider using [MiniCssExtractPlugin][1] for this purpose which together with the HtmlWebpackPlugin, would allow you to get the link tag in your HTML files, pointing to your CSS files.

I am quoting from the HtmlWebpackPlugin [documentation][2]:

If you have any CSS assets in webpack's output (for example, CSS extracted with the MiniCssExtractPlugin) then these will be included with tags in the element of generated HTML.

You can also check out this SO [answer][3] that suggests some additional ways to inline CSS in HTML.

If you want, you can share a link to your project, and I can try to assist you more specifically. [1]: https://webpack.js.org/plugins/mini-css-extract-plugin/ [2]: https://webpack.js.org/plugins/html-webpack-plugin/ [3]: https://stackoverflow.com/a/50770543/6098812