node.js - Sass loader not working in webpack -


i trying *.scss files supported in webpack configuration keep getting following error when run webpack build command:

error in ./~/css-loader!./~/sass-loader!./app/styles.scss module build failed: typeerror: cannot read property 'sections' of null @ 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) @ previousmap.consumer (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34) @ new input (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28) @ parse (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17) @ new lazyresult (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47) @ processor.process (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16) @ processcss (/users/sean/development/playground/webpack.sass.test/node_modules/css-loader/lib/processcss.js:168:24) @ 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 

i can't life of me figure out why. it's basic setup.

i have created dropbox share bare minimum illustrating this: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

unzip run:

npm install webpack 

here webpack.config.js file:

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'     }]   } } 

and index.js entry file:

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

and styles.scss file:

body {   background-color: #000; } 

it appears follow recommendations of sass-loader documentation site, can't run.

:(

information environment:

node - 0.12.4 npm  - 2.10.1 os   - os x yosemite 

i have managed workaround working doesn't involve editing css-loader libraries within npm_modules directory (as per answer @chriserik).

if add '?sourcemap' sass loader css loader seems handle output.

here updated configuration:

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. expanded test include compass-mixins include, , worked too.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -