Webpack 2/React: cannot get style to work - reactjs

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!