La source-map de Webpack ne résout pas les importations de sass

Question

J'ai le webpack configuré pour transpiler scss -> css, mais sourcemap généré par webpack ne résout pas 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; } 

Cependant, dans les outils de dev Chrome, je vois une référence à main.scss où j'attends référence à _foo.scss - voir la capture d'écran ci-dessous:

demo Compilé: http://store.amniverse.net/webpacktest/

Answer 1

Vous avez là sass-loader, mettez-le avec:

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

Et cela fonctionnerait.

Answer 2

Vous ne devez pas utiliser extractTextPlugin lorsque vous êtes en mode dev. Veuillez faire des configs supplémentaires pour le mode de développement et de production. En production, l'utilisation de extractTextPlugin est correcte, mais en mode dev, elle n'est pas nécessaire et peut conduire à ce que d'autres fonctionnalités ne fonctionnent pas. Alors utilisez plutôt le chargeur de style.

Aussi - je ne suis pas sûr si cela résout votre problème - essayez d'utiliser importLoaders prop sur le chargeur css. Regardez ici pour plus d'informations:

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

Il n'y a rien de mal avec ExtractTextPlugin en mode dev, et ce @Omri Aharon affiché est correct. Toutefois, vous devez considérer a la carte source activée uniquement en mode de développement.

Pour construire webpack utilisant ses paramètres de production par défaut (qui uglifies et applique le plugin OccurrenceOrderPlugin par défaut dans webpack 2.0+), exécutez la commande webpack -p, puis dans votre webpack.config.js, vous pouvez déterminer si vous êtes en mode dev ou non en faisant:

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

Ajouter la fonction

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

dans votre webpack.config.js, rendant votre chargeur SCSS apparaissent comme si:

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

et ma section plugins a

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