我无法在grunt中使用很多contrib-sass功能.我前一天潜入咕噜声,发现它真的很棒.

链接到contrib-sass repo,其中说源图应该正常工作:https: //github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

注意:我有sass流血的边缘,如果我使用此功能可以正常工作:sass --watch --scss --sourcemap --no-cache使用谷歌Chrome金丝雀源图和Sass样式表调试

这是我的Gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',

    concat: {
      options: {
        separator: '\n// New file\n',
        banner: '<%= banner %>'
      },
      develop: {
        files: [
          { src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
        ]
      },
      vendor: {
        files: [
          { src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
        ]
      }
    },

    uglify: {
      options: {
        banner: '<%= banner …

我正在尝试使用Webpack为TypeScript设置构建过程。在大多数情况下，一切正常。但是我无法使源映射在Karma测试运行程序中正常工作。

问题描述

假设我有一个打字稿文件test.spec.ts（1）。该文件由TypeScript使用内联源映射（2）转换为某些ES5源。最后，Webpack 4使用eval-source-maps（3）将ES5源捆绑在一起，并由Karma测试运行者提供给Chrome。

通过检查Chrome中的Karma Debug Runner中的源代码，我可以看到所有三个阶段的转换实际上都可用于浏览器：

• （1）被映射为 webpack://test.spec.ts?c161
• （2）被映射为 webpack-internal://test.spec.ts
• （3）可作为 localhost:9876/base/test.spec.ts

在Chrome控制台中，我还获得了测试执行过程中引发的所有错误的正确堆栈跟踪。如我所料，这些包括源映射到（1）的行号。例如：

Error: Oh no!
    at Function.MyClass.myBadMethod (test.spec.ts?c161:9)
    at UserContext.eval (test.spec.ts?c161:21)
    at <Jasmine>

但是，因果报应本身会记录仅行映射到（2）的行号错误。例如：

Error: Oh no!
    at Function.MyClass.myBadMethod (webpack-internal:///./src/test.spec.ts:8:15)
    at UserContext.eval (webpack-internal:///./src/test.spec.ts:17:17)
    at <Jasmine>

这是完全无济于事的，因为（2）只是一些中间源，甚至从未写入磁盘。实际上，我不需要（2）的源映射，也不了解为什么首先将它们包括在内。如果可能的话，我想尝试禁用它们（当然要为（1）保留正确的源映射）。

无论如何，重要的是要让Karma报告具有相对于原始文件的行号的堆栈跟踪，就像在Chrome控制台中一样。如有必要，我也愿意为此付出执行速度

如果您想不出一个完善的解决方案，但对TypeScript / TS-Loader / Webpack / Karma-Webpack / Karma有一些见解：我也对有助于查明该工具链中问题的任何论据感兴趣。

最小的测试配置

devDependencies来自 package.json

"devDependencies": {
    "@types/jasmine": "~2.8.7",
    "jasmine": "~3.1.0",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-jasmine": "~1.1.2",
    "karma-webpack": "~3.0.0",
    "ts-loader": "~4.3.0",
    "typescript": "~2.8.3",
    "webpack": "~4.8.3"
}

karma.conf.js

module.exports = function(config) …

我开始配置我的第一个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 …

是否可以使用生成代码的源映射来获取构建期间预渲染所发出的错误的完整堆栈跟踪？

目前，如果在 期间预渲染页面失败next build，则错误堆栈跟踪输出来自缩小的代码而不是项目的实际源，这使得跟踪错误变得非常困难。

即使productionBrowserSourceMaps启用了 in next.config.js，预渲染似乎仍然会发出带有缩小的堆栈跟踪的错误，这使得查找源非常困难。