CSS file is not emitted on incremental rebuild in watch mode

[pshurygin]

Using mini-css-extract-plugin 0.2.0 with webpack 4.1.0 with this config and -watch option:

module: {
	rules: [
		{
			test: /\.css$/,
			use: [
				MiniCssExtractPlugin.loader,
				{ loader: 'css-loader', options: { url: false, sourceMap: true } }
			]
		},
		{
			test: /\.scss$/,
			use: [
				MiniCssExtractPlugin.loader,
				{ loader: 'css-loader', options: { url: false, sourceMap: true } },
				{ loader: 'sass-loader', options: { sourceMap: true } }
			]
		}
	]
}

Initial build works fine and outputs css bundle as expected. Whenever i change my scss file, an incremental rebuild is triggered and this changed scss file is clearly shown in the console output, but somehow the emitted css bundle is not changed from the initial build. If i rerun the build from scratch, the changes are correctly propagated to filesystem. Here is an output after incremental rebuild.

>  0% compiling
>  10% building modules 4/4 modules 0 active
>  10% building modules 5/6 modules 1 active ...s\solo-showcase-columns-widget.scss 0
>  10% building modules 7/7 modules 0 active
>  10% building modules 11/11 modules 0 active
>  10% building modules 12/13 modules 1 active ...ures\content-bank\content-bank.scss 0
>  10% building modules 18/18 modules 0 active
>  10% building modules 19/20 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 27/28 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 32/33 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 33/34 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 44/46 modules 2 active ...tend\features\balance\invoices.scss 0
>  11% building modules 45/47 modules 2 active ...\features\balance\transactions.scss 0
>  12% building modules 46/47 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 48/49 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 49/50 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 49/51 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  12% building modules 61/63 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  12% building modules 67/69 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  13% building modules 79/82 modules 3 active ...wizard\step-budget\budget-step.scss 0
>  13% building modules 82/85 modules 3 active ...udience-popup\persist-audience.scss 0
>  13% building modules 84/86 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 96/99 modules 3 active ...nents\file-input\sm-file-input.scss 0
>  14% building modules 97/99 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 109/111 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 111/114 modules 3 active ...d\vendor\custom\introjs\introjs.css 0
>  14% building modules 112/114 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 113/114 modules 1 active ...works\wizard\step-goal\goal-step.scss
>  70% finish module graph FlagDependencyExportsPlugin
>  70% sealing WarnCaseSensitiveModulesPlugin
>  72% after dependencies optimization
>  75% basic chunk optimization RemoveParentModulesPlugin
>  76% advanced chunk optimization SplitChunksPlugin
>  75% basic chunk optimization RemoveParentModulesPlugin
>  84% module id optimization
>  86% after chunk id optimization
>  88% hashing
>  90% additional chunk assets processing
>  95% emitting unnamed compat plugin
> Hash: bf05be2f878f02734bcc
> Version: webpack 4.1.0
> Time: 478ms
> Built at: 2018-3-7 18:16:56
>      Asset     Size  Chunks             Chunk Names
>    en.json  150 KiB          [emitted]  
>    es.json  157 KiB          [emitted]  
>    ru.json  156 KiB          [emitted]  
> pt-BR.json  158 KiB          [emitted]  
>  + 38 hidden assets
> Entrypoint solomoto [big] = runtime.js vendor.css vendor.js solomoto.css solomoto.js
> Entrypoint showcase [big] = runtime.js vendor.css vendor.js showcase.css showcase.js
> Entrypoint showcase-wysiwyg = runtime.js showcase-wysiwyg.css showcase-wysiwyg.js
> Entrypoint registration [big] = runtime.js vendor.css vendor.js registration.css registration.js
> Entrypoint admin-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js admin-panel.css admin-panel.js
> Entrypoint content-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js content-panel.css content-panel.js
> [./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] 39 bytes {solomoto} [built]
> [./Frontend/vendor/custom/sortable/sortable.js] 36 KiB {vendor} [built]
>     + 1378 hidden modules
> Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss:
>     Entrypoint mini-css-extract-plugin = *
>     [./node_modules/css-loader/index.js??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] ./node_modules/css-loader??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss 23.9 KiB {mini-css-extract-plugin} [built]
>         + 1 hidden module

[krtr]

same happens with webpack-serve

[mdreizin]

Also I can confirm that it doesn't work for incremental builds.

[acoll]

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...

[vertic4l]

Hopefully @sokra got an idea.

[creage]

Playing with hashes doesn't help either. This issue makes watch mode development completely impossible...

[manuelbieh]

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.

[piehei]

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.

:-)

[piecyk]

@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"
        ]
      }
    ]
  }
}

[pamtbaau]

@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...]

[manuelbieh]

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! 🙂

[wmertens]

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 webpack-contrib/extract-text-webpack-plugin#577