MiniCssExtractPlugin doesn't link with my html file

Question

When i Webpack my project using MiniCssExtractPlugin to separate css into files, it creates the main.css file but never write the link into my html file.

Here is my webpack.config.js :

const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const dev = process.env.NODE_ENV ==="dev"
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let cssloaders = [MiniCssExtractPlugin.loader, {loader: 'css-loader', options:{importLoaders: 2, modules: true } } ]


if(!dev) {
    cssloaders.push( {
        loader: 'postcss-loader',
        options : {

            plugins: (loader) => [


              require('autoprefixer')( { browsers : ['last 2 versions', 'ie > 8'] 
              }),
            ]
        },
})

}

let config = {
  mode : 'none',
  entry:  "./assets/js/app.js" ,
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
    publicPath: "/wp/dist/"
  }, 
  devtool : dev ? "cheap-module-eval-source-map" : "source-map",
  watch : dev,
  module : {
    rules : [
      {
        test : /\.js$/,
        exclude: /(node_modules|bower_components)/,

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

    ]
  },
  plugins : [
    new MiniCssExtractPlugin({
      filename : '[name].css',
      chunkFilename: "[id].css"

    })

  ],
  optimization : {
    minimize : !dev
  }

}
if(!dev){
  config.plugins.push(new UglifyJsPlugin({
    sourceMap : true
  }))
}

module.exports = config;

So the loaders are in correct order : postcss-loader (if not in dev), sass-loader (for scss test), css-loader and MiniCssExtractPlugin.

When I webpack, the main.css fil is well emitted, but the html file doesn't have the link href in the head written...so there is no css :-)

bundle.js  4.85 KiB       0  [emitted]  main
 main.css  67 bytes       0  [emitted]  main

I think i miss something ?

Thank you in advance !

Rapt

Answer 1

It's normal behavior because mini-css-extract-plugin only help you to extract css into seperate css file instead of include css in js file.

You need to use html-webpack-plugin to include your css into html otherwise you have to add css in your html manually

Guttate

It says in the documentation that it injects link elements into the DOM. Was this not the case at the time of answer? – Insure

@RichardSimões If you're referring to the documentation around the insert option, I found this confusing as well. On paying close attention - they indicate that it's the (separate) extract-css-chunks-plugin plugin that appends link elements. If I'm reading it right, if you don't use the chunks plugin you will not get the link insert behavior. I'm not sure why the option for that is exposed and documented in the MiniCssExtractPlugin, though. – Dentation

How to include my css into html in webpack config, is there an example? I noticed the documentation around the insert option. And I am confused, too. – Durian

@Durian check out my project config here github.com/SaiGonSoftware/Awesome-CMS-Core/blob/master/src/… – Guttate

I'm linking the css in the dist folder in the view like this github.com/SaiGonSoftware/Awesome-CMS-Core/blob/master/src/… – Guttate

Answer 2

I just add the main.css file to my HTML manually, without needing to install any extra plugins. I'm ok with this because the file never changes its name.

<link rel="stylesheet" href="/public/css/main.css">

Thyme

What about cache busting and chunking? – Need

While the solution works in your case, it is not relevant to the scope of the question. – Ascanius