CSS Sourcemap using Extract Text Plugin/CSS-loader Webpack

Question

Я пытаюсь создать исходную карту css из webpack. Однако в настоящее время файл css.map, который генерируется, в основном пуст.

Я понимаю, что мне нужно добавить что-то похожее на ниже

css-loader?sourceMap 

Но я не уверен, как я цепь это с importLoaders = 1, который я в настоящее время есть в моем webpack.config.js , Любая помощь будет принята с благодарностью.

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

Я только что нашел пример с правильным способом для этого. Я использовал «&» в цепи вместе, т.е.

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