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
Post a Comment