web-dev-qa-db-fra.com

Le chargeur Sass ne fonctionne pas dans le webpack

J'essaie d'obtenir des fichiers * .scss à prendre en charge dans ma configuration de webpack mais je reçois toujours l'erreur suivante lorsque j'exécute la commande de construction de webpack:

ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss
Module build failed: TypeError: Cannot read property 'sections' of null
at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21)
at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34)
at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28)
at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47)
at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16)
at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24)
at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15)
@ ./app/styles.scss 4:14-117

Je ne peux pas pour la vie de moi comprendre pourquoi. C'est une configuration très basique.

J'ai créé un partage dropbox avec le strict minimum illustrant cela: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=

Décompressez-le puis exécutez:

npm install
webpack

Voici mon fichier webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'eval',
  entry: [
    './app'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [{
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader'
    }]
  }
}

Et le fichier d'entrée index.js:

require('./styles.scss');

alert('foo bar baz');

Et le fichier styles.scss:

body {
  background-color: #000;
}

Il semble suivre les recommandations du site de documentation de sass-loader, mais je n'arrive pas à le faire fonctionner.

:(

Informations sur mon environnement:

node - 0.12.4
npm  - 2.10.1
os   - OS X Yosemite
node.jssasswebpack
20
ctrlplusb

J'ai réussi à obtenir une autre solution de contournement qui n'implique pas la modification des bibliothèques css-loader dans mon répertoire npm_modules (selon la réponse de @chriserik).

Si vous ajoutez '? SourceMap' au chargeur sass, le chargeur CSS semble gérer la sortie.

Voici ma configuration mise à jour:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'eval',
  entry: [
    './app'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [{
      test: /\.scss$/,
      loader: 'style!css!sass?sourceMap'
    }]
  }
}

P.S. J'ai même élargi ce test pour inclure une inclusion de boussole-mixins, et cela a fonctionné aussi.

23
ctrlplusb

Après avoir rencontré le même problème, j'ai trouvé ceci: https://github.com/webpack/css-loader/issues/84

Apparemment, la solution pour l'instant est de modifier manuellement les lignes 17-19 de /node_modules/css-loader/lib/loader.js avec

if(map && typeof map !== "string") {
    map = JSON.stringify(map);
}

Cela a résolu le problème pour moi.

5
chriserik

Le problème est résolu en définissant source-map option sur true (comme vu dans d'autres réponses).

Mais si vous trouvez des options de passage désordonnées dans la chaîne de requête, il existe une alternative;

pour configurer le chargeur sass, vous pouvez créer une propriété sassLoader dans l'objet de configuration webpack:

module.exports = {
  devtool: 'eval',
  entry: [
    './app'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [{
      test: /\.scss$/,
      loader: 'style!css!sass'
      // loader: ExtractPlugin.extract('style', 'css!sass'),
    }]
  },
  sassLoader: {
    sourceMap: true
  },
}
0
maioman