scss文件不在源映射中 - webpack

Question

我有一个webpack配置，在使用babel编译它们之后服务于缩小的js和css。我使用scss然后使用sass，postcss，css loader转换它们。 我无缘无故地收到这个错误。

ERROR in C:/Development/cxd-addon-iss/digital-spearhead/digital-ui/src/~/css-loader?{"minimize":true,"sourceMap":true}!C:/Development/cxd-addon-iss/digital-spearhead/digital-ui/src/~/postcss-loader?{"sourceMap":true}!C:/Development/cxd-addon-iss/digital-spearhead/digital-ui/src/~/sass-loader?{"sourceMap":true}!../scss/core.scss
    Module build failed: Error: "../../../../../../../node_modules/@tr-ui/cxd-ui/lib/styles/base/_config.scss" is not in the SourceMap.

我的网络包配置如下：

const webpack = require('webpack');
const path = require('path');

// Plugins
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const AutoPrefixer = require('autoprefixer');

// Env
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';

// Dirs
const jsSourcePath = path.join(__dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/src/js');
const buildPath = path.join(__dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/dist');
const sourcePath = path.join(__dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/src');

// https://github.com/webpack/loader-utils/issues/56
process.noDeprecation = true;


const plugins = [
  new SpritePlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(nodeEnv),
    },
  }),
  new webpack.NamedModulesPlugin(),
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        AutoPrefixer({
          browsers: ['last 2 versions', 'ios 8', 'ie 9', 'ie 10', 'ie 11'],
        }),
      ],
      context: sourcePath,
    },
  }),
];


const rules = [
  {
    test: /\.(js|jsx)$/i,
    exclude: /(node_modules|cxdigital-ui-library)/,
    use: [
      'babel-loader',
      'eslint-loader',
    ],
  },
  {
    test: /\.svg$/i,
    include: /node_modules\/@tr-ui\/cxd-ui\/lib\/assets\/icons/,
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'assets/icons/sprite.svg',
        },
      },
      'svgo-loader',
    ],
  },
  {
    test: /\.(gif|png|jpg|jpeg)$/i,
    //include: /node_modules\/@tr-ui\/cxd-ui\/lib\/assets\/img/,
    loaders: [
      'url-loader?limit=1&name=assets/img/[name].[ext]',
      {
        loader: 'image-webpack-loader',
        query: {
          mozjpeg: { quality: [90, 95], progressive: true },
          gifsicle: { interlaced: true },
          optipng: { optimizationLevel: 5 },
          pngquant: { quality: '75-90', speed: 3 },
        },
      },
    ],
  },
  {
    test: /\.(png|svg)$/i,
    //include: /node_modules\/@tr-ui\/cxd-ui\/lib\/assets\/favicon/,
    loaders: [
      'url-loader?limit=1&name=assets/favicon/[name].[ext]',
      {
        loader: 'image-webpack-loader',
        query: {
          optipng: { optimizationLevel: 5 },
          pngquant: { quality: '75-90', speed: 3 },
        },
      },
    ],
  },
  {
    test: /\.(ico)$/i,
    loader: 'file-loader?name=assets/favicon/[name].[ext]',
  },
  {
    test: /\.(woff|woff2)$/i,
    loader: 'file-loader?name=fonts/[name].[ext]',
  },
];


if (isProduction) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false,
      },
    }),
    new ExtractTextPlugin('css/styles.css'),
    new webpack.BannerPlugin({
      include: /\.(css|js)$/i,
      banner: '[file]\nCopyright (c) Varun',
    })
  );

  rules.push(
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          { loader: 'css-loader', options: { minimize: true } },
          { loader: 'postcss-loader' },
          { loader: 'sass-loader' },
        ],
      }),
    }
  );
} else {
  console.log('_______________________ ****************** ________________________')
  console.log(' **** this is not a production - this is a development platform ***')
  console.log('_______________________ ****************** ________________________')
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false,
      },
    }),
    new ExtractTextPlugin('css/styles.css'),
    new webpack.BannerPlugin({
      include: /\.(css|js)$/i,
      banner: '[file]\nCopyright (c) Varun',
    })
  );

  rules.push(
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader?sourceMap!postcss-loader!sass-loader?sourceMap',
      }),
    }
  );
}


module.exports = {
  devtool: isProduction ? false : 'source-map',
  context: jsSourcePath,
  entry: {
    js: 'index.js',
  },
  output: {
    path: buildPath,
    publicPath: '/etc/designs/digital/clientlibs/dist/',
    filename: 'js/app.js',
  },
  module: {
    rules,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    symlinks: false,
    modules: [
      path.resolve(__dirname, 'node_modules'),
      jsSourcePath,
    ],
  },
  plugins
};

我也尝试了很多选项，比如为sass，postcss loader添加选项，然后将sourcemap作为true。由于源地图无法找到这些文件，因此无法正常工作。

有没有办法用sourcemap做到这一点。 我需要这个源映射来调试代码