Webpack 2/React: cannot get style to work

Question

I've been stuck here for hours now - can't include my style in development mode with webpack.config.js, and can't bundle my styles when I build my project with webpack.config.prod.js - or inject the style link into the generated index-template.html. Instead, no css file is generated - and the generated html file does not include style tag:

I've done this in other React/Webpack projects with no problems, where identical configuration results in both style tag and bundled css file:

I don't understand where I am going wrong .. this is my folder structure:

This is my webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

const entry = [
  'babel-polyfill',
  'webpack-dev-server/client?http://127.0.0.1:8080', // Specify the local server port
  'webpack/hot/only-dev-server', // Enable hot reloading
  './scripts/index.js' // Where webpack will be looking for entry index.js file
];

const output = {
  path: path.join(__dirname, 'dist'), // This is used to specify folder for producion bundle
  publicPath: '/dist',
  filename: 'bundle.min.js' // Filename for production bundle
}

const plugins = [
  new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        _: 'lodash'
    })
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
  devtool: 'inline-source-map',
    devServer: {
        historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
    },
  output: output,
  module: {
    rules: [
      {
                test: /\.(js|jsx)$/,
        exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
        use: {
                    loader: "babel-loader"
                }
            },
      {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
    ]
  },
  plugins: plugins
}

module.exports = config;

and this is my webpack.config.prod.js file:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const entry = [
  './scripts' // Where webpack will be looking for entry index.js file
];

const output = {
  path: path.join(__dirname, 'dist'), // This is used to specify folder for producion bundle
  publicPath: '/dist',
  filename: 'bundle.min.js' // Filename for production bundle
}

const plugins = [
  new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        _: 'lodash'
    }),

  new ExtractTextPlugin({
    disable: false,
    filename: 'bundle.css',
    allChunks: true
  }), // extract you css into seperate file files to serve your webpack bundles

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './index.html',
    hash: false,
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    }
  }),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    },
    sourceMap: true
  }),

  new webpack.optimize.CommonsChunkPlugin({
        name: 'bundle',
        filename: 'bundle.common.js'
    })
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
  devtool: 'source-map',
    devServer: {
        historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
    },
  output: output,
  module: {
    rules: [
      {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
                use: {
                    loader: "babel-loader"
                }
            },
      {
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                  'css-loader',
                  {
                            loader: 'postcss-loader',
                            options: {
                                plugins: (loader) => [ require('autoprefixer')() ]
                            }
                        },
                  'sass-loader',
                ]
              })
            }
    ]
  },
  plugins: plugins
}

module.exports = config;

I am so effing thankful for any input <3

Answer 1

As @margaretkru said, I had forgotten to import my app.scss in my index.js file!