Style loader does not working if bundle is presented

Question

If I'm using dev mode, style loader works fine. But when I build project and I have dist folder, I can't see style tag in head tag. What's interesting, I can't see style tag only if bundle.js file is presented in dist.

My config:

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractSASS = new ExtractTextPlugin({
  filename: './css/[name].css',
  allChunks: true
});

var entry = [
  'babel-polyfill',
  './src/index.js'
]

var output = {
  path: path.join(__dirname, 'dist'),
  filename: 'js/bundle.js',
  publicPath:'/static/'
}

var rules = [
  {
    use: 'babel-loader',
    include: __dirname,
    exclude:[
      path.resolve(__dirname, "node_modules"),
    ],
    test: /\.js$/
  },
  {
    test: /\.(scss|css)$/,
    use: process.env.NODE_ENV == 'production'
      ? extractSASS.extract({
        fallback: 'style-loader',
        use: ['css-loader','sass-loader']
      })
      : [ 'style-loader', 'css-loader', 'sass-loader']
  }
]

if(process.env.NODE_ENV != 'production') entry.push('webpack-hot-middleware/client')

const dev = {
  devtool: 'cheap-module-eval-source-map',
  entry: entry,
  output: output,
  plugins: [
    extractSASS,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: rules
  }
}

const prod = {
  entry: entry,
  output: output,
  plugins: [
    extractSASS,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new CopyWebpackPlugin([{from:'src/img', to:'img'}]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  module: {
    rules: rules
  }
}

module.exports = process.env.NODE_ENV == 'production' ? prod : dev;

Does anybody have any idea what can cause a problem? Thanks.

Answer 1

The problem was in HMR. As you can see in the config, in production we don't use HMR. So, when our bundle is created, our markup grab this bundle. This bundle doesn't have any idea about changes in sass(because it doesn't contain hmr stuff), so, we can't see style tag in our head. The solution is deleting bundle before running in dev mode.