MiniCSSExtract Plugin is not emitting any CSS

[abhsrivastava]

I am using mini-css-extract-plugin version 0.4.0
node version: v9.10.1

My webpack.config looks like

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}

However when I run my project using yarn start and access it from the browser http://localhost:8080 and I go into the network tab. I don't see any CSS file. My hope was that my SCSS file will be converted into a CSS file and that CSS file will be visible in the network tab.

This is a sample project which highlights the problem.
https://github.com/abhsrivastava/login-ts-react

I also posted the problem here
https://stackoverflow.com/questions/50089859/webpack-not-creating-css-file-for-scss

[alexander-akait]

@abhsrivastava Looks like a bug 👍

[arthens]

Just ran into this problem too. As a workaround I ended up using MiniCssExtractPlugin.loader in development too (I'm not using HMR)

[alexander-akait]

Yep, right now mini-css-extract-plugin are not support HMR, close in favor #34

[arthens]

Should the docs be updated? The example provided under Advanced configuration example doesn't work without hot reloading either

[nicolauria]

This is an old post but I wanted to comment in case it helps someone. If you're using webpack-dev-server then you won't see any generated js or css file as it creates these files in memory. Try running just a normal 'webpack' command and see if the css file gets generated.

[ScriptedAlchemy]

Use writeFilesPlugin if you want to force the in-memory output to be written to disk with Webpack-dev-server

[turbowars]

Thanks folks! I added an extra loader to my webpack config and it worked!
{
'loader' : MiniCssExtractPlugin.loader,
},