Webpackのsource-mapでsassのインポートが解決されない

Question

webpackはscss - > cssにトランスペアレントに設定されていますが、webpackによって生成されたsourcemapはscss @importを解決しません。

webpack.config.js：

main.scss

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const outputPath = path.join(__dirname, 'dist'); 

module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/main.scss'], 
    target: 'web', 
    output: { 
     filename: 'js/[name].bundle.js', 
     path: outputPath 
    }, 
    module: { 
     rules: [ 
      { // sass/scss loader for webpack 
       test: /\.(sass|scss)$/, 
       loader: ExtractTextPlugin.extract([ 
        { 
         loader: 'css-loader', 
         options: { 
          url: false, 
          import: true, 
          minimize: true, 
          sourceMap: true, 
         } 
        }, 
        'sass-loader' 
       ]) 
      }, 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ // define where to save the file 
      filename: 'css/[name].bundle.css', 
      allChunks: true, 
     }) 
    ] 
}; 

：

は

@import 'foo'; 

_foo.scss：

h1 { color: red; } 

しかし、クロームのdevのツールで、私はリファレンスを参照してくださいmain.scssへ_foo.scssへの参照が必要です - 下のスクリーンショットを参照してください：

コンパイルデモ：http://store.amniverse.net/webpacktest/

Answer 1

あなたはそこsass-loaderを持っている、とそれを切り替える：

{ 
    loader: 'sass-loader', 
    options: { 
    sourceMap: true 
    } 
} 

そして、それが働くだろう。

Answer 2

devモードでは、extractTextPluginを使用しないでください。 devとproductionモードのために特別な設定をしてください。プロダクションでは、extractTextPluginの使用は問題ありませんが、devモードでは必要ではなく、動作しない他の機能につながる可能性があります。代わりにスタイルローダーを使用してください。

また、私はそれがあなたの問題を解決するなら、shureではありません - cssローダーでimportLoaders propを試してみてください。詳細はこちらをご覧ください：

https://github.com/webpack-contrib/css-loader#importloaders

const path = require('path'); 

const outputPath = path.join(__dirname, 'dist'); 

module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/main.scss'], 
    target: 'web', 
    output: { 
     filename: 'js/[name].bundle.js', 
     path: outputPath 
    }, 
    module: { 
     rules: [ 
      { // sass/scss loader for webpack 
       test: /\.(sass|scss)$/, 
       loader: [ 
        { 
         loader: 'style-loader', 
         options: { 
          sourceMap: true 
         } 
        }, 
        { 
         loader: 'css-loader', 
         options: { 
          url: false, 
          import: true, 
          minimize: true, 
          sourceMap: true, 
          importLoaders: 1, 
         } 
        }, 
        { 
         loader: 'sass-loader', 
         options: { 
         sourceMap: true 
         } 
        } 
       ] 
      }, 
     ] 
    } 
}; 

Answer 3

ありDEVモードでExtractTextPluginと間違って何もいない、と何@Omri者Aharonを掲載することは正しいです。しかし、の場合、はソースマップがdevモードでのみ有効になっていると考えるべきです。 （WebPACKの中で、デフォルトでOccurrenceOrderPluginプラグインを適用しuglifiesと2.0+）デフォルトの生産の設定を使用してWebPACKのを構築するには

、コマンドwebpack -pを実行し、あなたがDEVモードまたはいないのであれば、あなたのwebpack.config.jsに、あなたが決めることができます実行して：

01：

const DEBUG = !process.argv.includes('-p'); 

は、あなたのSCSSローダーがように見せること、あなたのwebpack.config.jsに機能

function cssConfig(modules) { 
    return { 
     sourceMap: DEBUG, 
     modules, 
     localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]', 
     minimize: !DEBUG 
    }; 
} 

を追加します。

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

と私のプラグインセクションは

new ExtractTextPlugin('[name].css?[contenthash]'),