Webpack’s style loader extracts css file into inline style tag

I’ve switched from including stylesheets the oldschool way:

<link rel="stylesheet" href="./../css/main.css">

to Webpack approach:

var css = require('./../css/main.css');

It works, but I don’t like that it extracts the css from this file into inline <style> tag, because then it’s harder to debug it in Dev Tools. For example I have no idea from which file and line these attributes are coming from:
enter image description here

It doesn’t matter if I use style-loader, css-loader or postcss-loader, result is always the same.
How can I move it to separate file or generate a source map that would point me to the source file? So when I inspect it Dev Tools it will look like this:

enter image description here

My webpack.config.js:

var autoprefixer = require('autoprefixer');

module.exports = {
    devtool: "css-loader?sourceMap",
    module:  {
        loaders: [
            {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    entry:   [
        './static/js/app.js'
    ],
    output:  {
        filename: './static/js/bundle.js'
    },
    watch:   false,
    postcss: function () {
        return [autoprefixer];
    }
};

My app.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
    alert('IT WORKS!');
});

window.app = module.exports;
var css = require('./../css/main.css');

Author: Fantashit

1 thought on “Webpack’s style loader extracts css file into inline style tag

Comments are closed.