extract-text-webpack-pluginを使用してWebpack 2でSCSSソースマップを動作させますか？

Question

私は最初のWebpack v2タスクマネージャの設定を開始しています。私がWebpackを使用しているのは初めてです。

私はextract-text-webpack-pluginを使用して外部CSSファイルを作成しています。

私の問題は、SCSSファイルのソースマップを設定する方法がわかりません。

誰にも解決策がありますか？

ありがとうございます！あなたはsass-loader Source mapsに示すようsass-loaderでsourceMapとcss-loaderを有効にする必要があり

var webpack = require('webpack'); 
var autoprefixer = require('autoprefixer'); 
var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var WebpackBuildNotifierPlugin = require('webpack-build-notifier'); 
var path = require('path'); 

module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'app.bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader','postcss-loader','sass-loader'], 
      publicPath: '/dist', 
     }) 
     } 
    ] 
    }, 
    devtool: 'source-map', 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Project Demo', 
     minify: { 
     collapseWhitespace: false 
     }, 
     hash: true, 
     template: './src/index.html' 
    }), 
    new WebpackBuildNotifierPlugin({ 
     sound: false, 
     suppressSuccess: false 
    }), 
    new BrowserSyncPlugin({ 
     server: path.resolve(__dirname, 'dist') 
     // proxy: { 
     // target: 'http://localhost:3000', 
     // ws: true 
     // } 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: true, 
     options: { 
     postcss: [ 
      autoprefixer({ 
      browsers: ['last 4 version', 'Explorer >= 10', 'Android >= 4'] 
      }) 
     ] 
     } 
    }), 
    new ExtractTextPlugin({ 
     filename:'app.css', 
     disable:false, 
     allChunks:true 
    }) 
    ] 
} 

Answer 1

：

---

は、ここに私のWebpack.config.jsファイルです。あなたの.scssルールは次のようになります。

{ 
    test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { loader: 'css-loader', options: { sourceMap: true } }, 
     'postcss-loader', 
     { loader: 'sass-loader', options: { sourceMap: true } }, 
    ], 
    publicPath: '/dist', 
    }) 
} 

Answer 2

を私は次のスニペットが出て働いたことがわかっOPと同じ問題を抱えていたし、マイケルJungosの提案に基づきます。基本的に私はマイケルが提供するスニペットを使用しましたが、postcss-loaderラインを少し伸ばしてからpublicPath: '/dist'を省略しなければなりませんでした。私はこのためのおかげで、ローダーに `sourceMap`プロパティを渡す方法を考え出す多くの問題を持ってた

{ test: /\.(scss|css)$/, loader: extractTextPlugin.extract({ fallback: 'style-loader', use: [ {loader: 'css-loader', options: {sourceMap: true}}, {loader: 'postcss-loader', options: {sourceMap: 'inline'}}, {loader: 'sass-loader', options: {sourceMap: true}} ] }) }