0

When I use extract-text-webpack-plugin, the extracted single CSS file appends itself to my index.html when creating the production build. However, I just switched to mini-css-extract-plugin and when I build for production the extracted single CSS file is not getting appended to my index.html.

This is the output produced by extract-text-webpack-plugin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<link rel="stylesheet" href="styles.c2c25cc46364fe37aad1.css">

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

And notice the output when I use mini-css-extract-plugin, it does not have the style sheet appended

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

This is mini-css-extract-plugin configuration

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              camelCase: true,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  autoprefixer: {
                    browsers: 'last 2 versions'
                  }
                }
              }
            }
          }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    })
    new MiniCssExtractPlugin({
      filename: 'styles/styles.[hash].css',
      chunkFilename: 'styles/styles.[hash].css'
    })
  ]

Do I need to add some other configuration to append the extracted CSS file to index.html? Maybe an extra config in html-webpack-plugin?

Zoe
  • 27,060
  • 21
  • 118
  • 148
esausilva
  • 1,964
  • 4
  • 26
  • 54
  • Have you tried using simpler filename and chunkFilename (not path) as in the example from https://github.com/webpack-contrib/mini-css-extract-plugin e.g. `filename: "[name].css"` – Kunukn Jun 20 '18 at 13:49
  • @Kunukn Yes, I have, but that is just the name of the file, it will not append the stylesheet to the `index.html` – esausilva Jun 20 '18 at 14:10
  • Just ignore my last answer. When you load your page, does the css gets loaded? Just ignore the result of `html-webpack-plugin`. – PlayMa256 Jun 20 '18 at 14:39
  • @MatheusSilva CSS does not get loaded because there is no reference to it. Unless I add it manually to the `index.html`. Which that is not an option because I am deploying to Heroku and creating the production build within Heroku – esausilva Jun 20 '18 at 15:54

0 Answers0