How do I compile SCSS into CSS using Webpack & ReactJS? - css

Question

Another ReactJS/Webpack n00b here. I've seen a thousand variations on this question, but what seems to work for others is not working for me.
How do I turn /app/scss/styles.scss into /app/css/styles.css?
Everything appears to compile correctly (no errors) when I run npm start, but I can't locate the compiled styles.css file.
package.json
"dependencies": {
"json-loader": "^0.5.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.5.0"
}
webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + '/app/components/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract('css-loader!sass-loader')
}
]
},
output: {
filename: 'compiled.js',
path: __dirname + '/build'
},
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin('/app/css/styles.css')
]
};
powershell (command line) output
Asset Size Chunks Chunk Names
compiled.js 1.06 MB 0 [emitted] [big] main
/app/css/styles.css 4.5 kB 0 [emitted] main
index.html 10.5 kB [emitted]
chunk {0} compiled.js, /app/css/styles.css (main) 1.03 MB [entry] [rendered]
... yadda yadda ...
[1] ./~/css-loader!./~/sass-loader/lib/loader.js!./app/scss/styles.scss 4.92 kB {0} [built]
webpack: Compiled successfully.
file structure
[NameOfApp]
.babelrc
package.json
webpack.config.js
node_modules
app
index.html
scss
css (empty)
components (js)
Any help is most appreciated. Getting desperate.