Webpack source-map löst Sass Importe nicht

Question

Ich habe Webpack konfiguriert, um scss -> css zu transpilieren, aber Quellkarte von Webpack erstellt löst nicht scss @import s.

webpack.config.js:

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, 
     }) 
    ] 
}; 

main.scss:

@import 'foo'; 

_foo.scss:

h1 { color: red; } 

jedoch in Chrome Entwickler-Tools, ich einen Verweis sehen zu main.scss, wo ich Referenz auf _foo.scss erwarte - siehe Screenshot unten:

kompilierte Demo: http://store.amniverse.net/webpacktest/

Answer 1

Sie haben sass-loader dort, schalten Sie es mit:

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

Und das funktionieren würde.

Answer 2

Sie sollten extractTextPlugin nicht verwenden, wenn Sie sich im Dev-Modus befinden. Bitte machen Sie zusätzliche Konfigurationen für den Entwicklungs- und Produktionsmodus. In der Produktion ist die Verwendung von extractTextPlugin in Ordnung, aber im Entwicklungsmodus ist es nicht notwendig und kann dazu führen, dass andere Funktionen nicht funktionieren. Verwenden Sie stattdessen den Style-Loader.

Auch - ich bin nicht sicher, wenn das Ihr Problem behebt - versuchen Sie, importLoaders Prop auf dem CSS-Lader zu verwenden. Schauen Sie hier für weitere Informationen:

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

Es ist nichts falsch mit ExtractTextPlugin in dev-Modus, und was @Omri Aharon geschrieben ist richtig. Allerdings sollte nur im Dev-Modus quell-map aktiviert sein.

Um webpack mit den Standardproduktionseinstellungen, führen Sie den Befehl webpack -p, und dann in Ihrem webpack.config.js (standardmäßig in webpack 2.0+ uglifies und gilt OccurrenceOrderPlugin Plugin) zu erstellen, können Sie feststellen, ob Sie in den Entwicklermodus sind oder nicht by doing:

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

Fügen Sie die Funktion

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

in Ihrem webpack.config.js, so dass Ihr SCSS loader als so erscheinen:

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

und mein Plugins Abschnitt haben

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