Загрузчик Sass не работает в webpack
Я пытаюсь получить *.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
Я не могу для жизни понять, почему. Это очень простая настройка.
Я создал общий ресурс Dropbox с минимальным минимумом, иллюстрирующим это:
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;
}
Похоже, что он соответствует рекомендациям сайта документации sass-loader, но я не могу заставить его работать.
: (
Информация о моей среде:
node - 0.12.4
npm - 2.10.1
os - OS X Yosemite
Ответы
Ответ 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. Я даже расширил этот тест, включив в него compass-mixins, и это тоже сработало.
Ответ 2
После такой же проблемы я нашел следующее: https://github.com/webpack/css-loader/issues/84
По-видимому, теперь решение состоит в том, чтобы вручную изменить строки 17-19 из / node_modules/css-loader/lib/loader.js с помощью
if(map && typeof map !== "string") {
map = JSON.stringify(map);
}
Это устранило проблему для меня.
Ответ 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
},
}