Webpack extracted css encoded? - reactjs

Question

I am trying to set this up so that I can write SCSS and have an output CSS file that's also run through Autoprefixer. My webpack config is creating a styles.css file but the content of the file is not CSS:
data:application/octet-stream;base64,ZXh...
/*# sourceMappingURL=styles.css.map*/
Here is my webpack config:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
entry: "./App/index.tsx",
output: {
path: "./App/Built/",
filename: "bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".scss"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "url!css!sass")
}
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
},
postcss: function () {
return [autoprefixer, precss];
},
plugins: [new ExtractTextPlugin('styles.css')],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
I am not sure why I have a base64 encoded string instead of CSS. I suspect it's the url-loader but webpack doesn't compile my css without it.
EDIT: Got it working with this change:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!postcss!sass")
},
{
test: /\.png$/,
loader: "url-loader"
},
{
test: /\.jpg$/,
loader: "url-loader"
},
{
test: /\.woff/,
loader: "url-loader"
},
{
test: /\.ttf/,
loader: "url-loader"
}