sass-loader is not compiling SCSS to CSS, just renders .CSS with SCSS formatting

Question

Been wondering why my nested properties were not working when everything thing seemed to indicate that they should be. Looked at the CSS being used in the console's Sources tab and it is formatting the SCSS to CSS. So something like this in SCSS it just leaves as is:

th {
    background-color: #d9d9d9;
    border: 1px solid black !important;
    font-size: 11px;
    padding-bottom: 50%;
    text-align: center;
    vertical-align: middle !important;

    .table-section-heading {
        text-align: left !important;
    }
}

Instead of turning it into:

th .table-section-heading {
    ...
}

Anyway, not sure what I am doing wrong, but here is my webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: __dirname,

  entry: [
    '../react/index'  
  ],

  output: {
      path: path.resolve('./src/assets/bundles/'),
      filename: './js/[name]-[hash].js'
  },

  plugins: [
    new BundleTracker({filename: './src/config/webpack-stats.json'}),
    new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
  ],

  module: {
    loaders: [
      // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=img/[name].[ext]"},
      { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.json$/,
        loader: ['json-loader'] 
      },
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'] 
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })      
      },   
    ],
  },

  resolve: {
    extensions: ['*', '.js', '.jsx', '.gif']
  }
}

Using the following relevant dependencies:

"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.6.2",
"webpack": "^3.5.3",
"webpack-bundle-tracker": "^0.2.0"

Answer 1

Ok, think I came across the answer after taking a class on Webpack which really helped me understand it better. When I was refactoring my webpack.config.js for code splitting of manifest.js,, vendor.js, and app.js, thought I'd revisit this issue.

In the documentation it has :

    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })  

Modified mine to this and now it seems to be working as expected (well, except it is indenting the nested property).

/* main.scss */
td {
    font-size: 11px;
    text-align: center;
    border-top: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;

    .test {
        font-size: 15px;
    }
}

Converts to CSS:

td {
  font-size: 11px;
  text-align: center;
  border-top: none !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; 
}

td .test {
  font-size: 15px;
}