web-dev-qa-db-ja.com

WebパックでSassローダーが機能しない

* .scssファイルをwebpack構成でサポートしようとしていますが、webpack buildコマンドを実行すると次のエラーが表示されます。

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=

これを解凍してから実行します：

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
node.jssasswebpack
20
ctrlplusb

私はnpm_modulesディレクトリ内のcss-loaderライブラリの編集を伴わない別の回避策を動作させることに成功しました（@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'
    }]
  }
}

追伸コンパスミックスインを含むようにこのテストを拡張し、これも機能しました。

23
ctrlplusb

同じ問題が発生した後、私はこれを見つけました： https://github.com/webpack/css-loader/issues/84

どうやら、今のところ解決策は/node_modules/css-loader/lib/loader.jsの17-19行目を手動で変更することです

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

これで問題は解決しました。

5
chriserik

この問題は、source-mapオプションをtrueに設定します（他の回答をご覧ください）。

ただし、クエリ文字列に乱雑な受け渡しオプションが見つかった場合は、別の方法があります。

sassローダーを設定するには、webpack configオブジェクトにsassLoaderプロパティを作成できます：

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
  },
}
0
maioman