Sass chargeur ne fonctionne pas dans le webpack

J'essaie de le faire *.scss fichiers pris en charge dans mon webpack de configuration, mais je reçois le message d'erreur suivant lorsque je lance le webpack commande de construction:

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 me comprendre pourquoi. C'est un très configuration de base.

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

Décompressez ce lancer:

npm install
webpack

Voici mon webpack.config.js fichier:

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 la index.js entrée de fichier:

require('./styles.scss');
alert('foo bar baz');

Et les styles.scss fichier:

body {
background-color: #000;
}

Il semble suivre les recommandations de la sass-chargeur de documents site, mais je ne peux pas le faire fonctionner.

🙁

D'informations sur mon environnement:

node - 0.12.4
npm  - 2.10.1
os   - OS X Yosemite
  • J'ai eu le même problème
InformationsquelleAutor ctrlplusb | 2015-06-19
  1. 23

    J'ai réussi à obtenir une autre solution de travail qui n'implique pas de modification du css-chargeur de bibliothèques au sein de mon npm_modules répertoire (comme par la réponse par @chriserik).

    Si vous ajoutez '?sourceMap " pour le sass chargeur de la css chargeur 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 étendu ce test pour inclure une boussole-mixin comprendre, et cela a fonctionné aussi.

    • Je suis sûr que la plupart le savent, mais comme je l'ai été en utilisant un includePaths déjà c'est que j'ai ajouté sourceMap { test: /\.scss$/, chargeur: 'le style!css!sass-loader?' + JSON.stringify({ includePaths: [ chemin d'accès.résoudre(__dirname, "app/design/_sass") ], sourceMap : true }) },`
    • Je viens de trouver ça un peu triste qu'il est nécessaire de faire des choses bizarres comme ça pour qu'il fonctionne. A fonctionné pour moi après l'application du correctif, donc merci de poster la réponse, mais il me fait toujours grincer des dents.
    • super! sauvé ma journée merci man 🙂
    InformationsquelleAutor ctrlplusb
  2. 5

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

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

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

    Le problème est résolu pour moi.

    • Génial, merci pour cette!
    • On dirait que ces lignes sont devenus partie intégrante de loader.js dans la version distribuée.
    InformationsquelleAutor chriserik
  3. 0

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

    Mais dans le cas où vous trouvez désordre options de passage dans la chaîne de requête, il est un autre;

    pour la configuration de la sass chargeur vous pouvez créer un sassLoader propriété dans le webpack objet de config:

    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
},
}
    • Comme de Webpack 2 propriétés personnalisées ne sont pas autorisés :\ vous aurez besoin de passer l'option dans le plugin ou le chargeur:
    InformationsquelleAutor maioman