mini-css-extract-plugin: CSS file is not emitted on incremental rebuild in watch mode

Looks like it is fixed with webpack 4.4.1 + mini-css-extract-plugin 0.4.0. Thanks!

@manuelbieh looking on this now 😃@piehei yeah 👏

As dirty hack for now disabling cache in config will trick the plugin to alter the extracted css file

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // disabling cache in watch mode 
  cache: false,
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

Please don’t post here unless you have something new to share. Otherwise other people following this issue will get email spam for no real and useful reason.

It would be good to give a thumbs up for other commenters if you face a similar situation etc.

😃

Same problem here. Get’s really annoying as I have to restart the whole webpack process every single time I change a single line in CSS. Can’t imagine being the only one having this problem as I’m using a pretty standard webpack config.

This is not the same issue but I’m having the problem with webpack v4.6.0, mini-css-extract-plugin v0.4.0, and hard-source-webpack-plugin v0.6.4, that if CSS is unchanged between builds then no CSS file is generated. To be clear these are subsequent builds not rebuilds using compiler.watch or Webpack Dev Server.

I put together an example repo here. If you run the webpack task twice, i.e. yarn start then stop the process then yarn start you will see the extracted CSS file is not generated on the 2nd try.

https://github.com/dtothefp/hard-cache-mini-css-webpack-4

And there is already an issue thread started 29 days ago that doesn’t seem to have generated much response

https://github.com/mzgoddard/hard-source-webpack-plugin/issues/301

Will use ExtractTextWebpackPlugin until this is fixed. Not really happy about that but at least it seems to work for me for the time being. Thanks for your help! 🙂

@manuelbieh As an alternative workaround, I’m using style-loader for the time being. See webpack.config.js below. Css does not get extracted into a separate external file, but does get referenced in the html file like <link type="text/css" rel="stylesheet" href="blob:file:///253efbed-2c8a-4d59-ae25-1833e8f8bfbb">

Not sure if it makes a difference, but I’m targeting Electron…

webpack.config.js

[...stuff deleted...]
'rules': [
    {
        test: /\.scss$/,
        use: [
            // {
            //     loader: MiniCssExtractPlugin.loader,
            // },
            {
                loader: 'style-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                    plugins: (loader) => [
                        require('precss')(),
                        require('autoprefixer')()
                    ]
                }
            },
            {
                loader: "sass-loader",
                options: {
                    sourceMap: true,
                    includePaths: [
                        path.resolve(__dirname, '../src/app/assets/sass'),
                        path.resolve(__dirname, '../node_modules/bootstrap/scss'),
                    ]
                }
            }
        ]
    }
],
'plugins': [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
]
[... stuff deleted...]

I dug into this a little bit over the weekend so hopefully this is helpful in someway.

I noticed the same issue mentioned above but if I pass along a hash here then I can get it to re-emit the css file. However, the new output isn’t the correct updated output, just the same file but rewritten(updated timestamp). I tried to trace through webpack to get an idea of whats supposed to be happening and somewhere around here it ends up replacing the new module with the cached version. I am pretty new to the inner workings of webpack so I’m not sure if that is intended.

Anyways, still digging…

BTW: cache: false still is usefull as a workaround here.

Problem reappeared with:

"webpack": "4.26.1",
"webpack-cli": "3.1.2",
"mini-css-extract-plugin": "0.4.5"

When changing CSS files all files are generated. It happens only if I change JS files and at first with the second “watched change”. Then only JS files are generated.

Webpack output then is:

Hash: a9be440b8c0da1ac733f
Version: webpack 4.26.1
Time: 62ms
Built at: 11/30/2018 9:25:37 PM
             Asset     Size  Chunks             Chunk Names
    myentry_dfc3e2.js  232 KiB    myentry  [emitted]  myentry
myentry_dfc3e2.js.map  240 KiB    myentry  [emitted]  myentry
[ !!! HERE THE CSS FILES ARE MISSING !!! ]
 + 2 hidden assets
Entrypoint myentry = myentry_9b74a3.css myentry_dfc3e2.js myentry_9b74a3.css.map myentry_dfc3e2.js.map
[./frontend-src/js/MyChangedFile.js] 4.3 KiB {myentry} [built]
    + 31 hidden modules

Simplified webpack.config.js:

const SOURCE_DIR = './frontend-src';
const DIST_DIR = './frontend-dist';
const ENTRY_BASE_NAME = '[name]_[contenthash:6]';

module.exports = {
  entry: {
    "myentry": `${SOURCE_DIR}/js/index.js`,
  },
  output: {
    filename: `${ENTRY_BASE_NAME}.js`,
    path: path.resolve(__dirname, DIST_DIR),
    publicPath: '../static/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },

          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              modules: true,
              localIdentName: "[local]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `${ENTRY_BASE_NAME}.css`
    })
  ],
  mode: 'development'
};

Any other information I should give?

If someone addresses this issue, it would be nice if there would be a hook that is called when the CSS changes. That way you can send a message to the browser that it needs to reload the CSS. See also https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/577