CSS Quellmap mit Extract Text Plugin/CSS-Lader Webpack

Question

Ich versuche eine css sourcemap aus webpack zu generieren. Derzeit ist die css.map-Datei, die generiert wird, jedoch weitgehend leer.

Ich verstehe, dass ich so etwas wie die folgenden

css-loader?sourceMap 

hinzufügen müssen Aber ich bin nicht sicher, wie ich diese Kette mit importLoaders = 1, was ich zur Zeit in meinem webpack.config.js haben . Jede Hilfe würde sehr geschätzt werden.

const webpack = require('webpack'); 
const path = require('path'); 
//post css 
var precss  = require('precss'); 
var autoprefixer = require('autoprefixer'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var postcssImport = require('postcss-import'); 

module.exports = { 

    context: __dirname + '/frontend', 
    devtool: 'source-map', 
    entry: "./index.js", 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, './static') 
}, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', '!css-loader?importLoaders=1!postcss-loader') 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("si-styles.css") 
    ], 
    // postcss: [ 
    //    precss, 
    //    autoprefixer({ browsers: ['last 2 versions'] }) 
    // ] 
    postcss: function(webpack) { 
     return [ 
      postcssImport({ addDependencyTo: webpack }), // Must be first item in list 
      precss, 
      autoprefixer({ browsers: ['last 2 versions'] }) 
     ]; 
    }, 

} 

Answer 1

Ich habe gerade ein Beispiel mit dem richtigen Weg gefunden, dies zu tun. Ich habe ‚&‘ zur Ketten zusammen dh

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract('style-loader', '!css-loader?sourceMap&importLoaders=1!postcss-loader') 
    }