Sass погрузчик не работает в WebPack

Question

Я пытаюсь получить * .scss файлы, которые будут поддерживаться в моей конфигурации WebPack, но я получаю следующее сообщение об ошибке при запуске команды 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 

Я могу» Потому что жизнь меня выясняет, почему. Это очень простая настройка.

Я создал долю с идентификации контента голый минимум, иллюстрирующий это: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

Распакуйте это затем запустить:

npm install 
webpack 

Вот мой 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' 
    }] 
    } 
} 

И входной файл index.js:

require('./styles.scss'); 

alert('foo bar baz'); 

И файл styles.scss:

body { 
    background-color: #000; 
} 

Это, как представляется, следовать рекомендациям документации сайта дерзость-погрузчиком, но я не могу заставить его работать.

:(

Информация о моей среде:

node - 0.12.4 
npm - 2.10.1 
os - OS X Yosemite 

Answer 1

Мне удалось получить еще одно обходное решение, которое не связано с редактированием библиотек css-loader в моем каталоге npm_modules (в соответствии с ответом @chriserik).

Если вы добавляете '? SourceMap' в загрузчик sass, загрузчик css, похоже, обрабатывает вывод.

Вот мои обновленные конфигурации:

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. Я даже расширил этот тест, включив в него компас-mixins, и это тоже сработало.

Answer 2

После того, как один и тот же вопрос, я нашел это: https://github.com/webpack/css-loader/issues/84

Очевидно, что решение теперь вручную изменить строки 17- 19 of /node_modules/css-loader/lib/loader.js с

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

Это исправило проблему для меня.

Answer 3

Проблема решена путем установки опции source-map в true (как видно из других ответов).

Но если вы найдете беспорядочные параметры передачи в строке запроса, есть альтернатива;

для настройки Sass загрузчика вы можете создать sassLoader свойство в объекте 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 
    }, 
}