6

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 !

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
jska13
  • 147
  • 3
  • 11

2 Answers2

9

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

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
  • 4
    It says in the documentation that it injects link elements into the DOM. Was this not the case at the time of answer? – Richard Simões Jan 12 '21 at 04:03
  • 4
    @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. – Mark Jan 18 '21 at 18:51
-3

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">
SandroMarques
  • 6,070
  • 1
  • 41
  • 46