使用extract-text-webpack-plugin使SCSS源图在Webpack 2中工作？

Question

我开始配置我的第一个Webpack v2任务管理器.这是我第一次使用Webpack.

我正在使用extract-text-webpack-plugin来拥有一个外部CSS文件.

我的问题是我不知道如何为我的SCSS文件设置源图.

有人有解决方案吗？

非常感谢!

---

这是我的Webpack.config.js文件:

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
var path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','postcss-loader','sass-loader'],
          publicPath: '/dist',
        })
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Project Demo',
      minify: {
        collapseWhitespace: false
      },
      hash: true,
      template: './src/index.html'
    }),
    new WebpackBuildNotifierPlugin({
      sound: false,
      suppressSuccess: false
    }),
    new BrowserSyncPlugin({
      server: path.resolve(__dirname, 'dist')
      // proxy: {
      //   target: 'http://localhost:3000',
      //   ws: true
      // }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true,
      options: {
        postcss: [
          autoprefixer({
            browsers: ['last 4 version', 'Explorer >= 10', 'Android >= 4']
          })
        ]
      }
    }),
    new ExtractTextPlugin({
      filename:'app.css',
      disable:false,
      allChunks:true
    })
  ]
}

Answer 1

您需要启用sourceMap在sass-loader与css-loader如图sass-loader来源的地图.你的.scss规则看起来像这样:

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { sourceMap: true } },
      'postcss-loader',
      { loader: 'sass-loader', options: { sourceMap: true } },
    ],
    publicPath: '/dist',
  })
}