Webpack extracted css encoded?
<p>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:</p>

<pre><code> data:application/octet-stream;base64,ZXh...
 /*# sourceMappingURL=styles.css.map*/
</code></pre>

<p>Here is my webpack config:</p>

<pre><code>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"
}
};
</code></pre>

<p>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.</p>

<p>EDIT: Got it working with this change:</p>

<pre><code>{
            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"
        }
</code></pre>