CSSのソースマップからテキスト抽出プラグイン/ CSS-loader Webpack

Question

webpackからCSSのソースマップを生成しようとしています。しかし、現在生成されているcss.mapファイルは大部分が空です。

私は私が

css-loader?sourceMap 

の下に似た何かを追加する必要があることを理解しかし、私は、私は現在、私のwebpack.config.js内持っimportLoaders = 1、でこれをチェーンどのように私はわかりませんよ。どんな助けでも大歓迎です。

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

これを行う正しい方法で例が見つかりました。私はhttp://stackoverflow.com/help/self-answerあなたがあなた自身の答えを受け入れる必要があり

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