Question

我正在尝试为cli3项目中的所有内容激活源地图。

到目前为止我有

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      css: {
        sourceMap: true
      },
      sass: {
        sourceMap: true
      },
      stylus: {
        sourceMap: true
      },
      postcss: {
        sourceMap: true
      }
    }
  },
  devServer: { port: 8888 },
  configureWebpack: {
    devtool: 'cheap-module-eval-source-map',
  // ...

根据此https://cli.vuejs.org/config/#css-sourcemap，除了更少（我不使用）以外，没有更多选择。

现在vue inspect给了我

          {
            loader: 'vue-style-loader',
            options: {
              sourceMap: false,
              shadowMode: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              implementation: {
                run_: function() {
                          return _call(f, Array.prototype.slice.apply(arguments));
                        },
                render: function() {
                          return _call(f, Array.prototype.slice.apply(arguments));
                        },
                renderSync: function() {
                          return _call(f, Array.prototype.slice.apply(arguments));
                        },
                info: 'dart-sass\t1.22.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.4.0\t(Dart Compiler)\t[Dart]',
                types: {
                  Boolean: function() {
                            return _call(f, Array.prototype.slice.apply(arguments));
                          },
                  Color: function() {
                            return _call(f, this, Array.prototype.slice.apply(arguments));
                          },
                  List: function() {
                            return _call(f, this, Array.prototype.slice.apply(arguments));
                          },
                  Map: function() {
                            return _call(f, this, Array.prototype.slice.apply(arguments));
                          },
                  Null: function() {
                            return _call(f, Array.prototype.slice.apply(arguments));
                          },
                  Number: function() {
                            return _call(f, this, Array.prototype.slice.apply(arguments));
                          },
                  String: function() {
                            return _call(f, this, Array.prototype.slice.apply(arguments));
                          },
                  Error: function Error() { [native code] }
                }
              },
              indentedSyntax: true
            }

如何激活vue组件样式的源地图？同样，configurewebpack.devtool似乎完全无效。（或者它仅在与loaderOptions配对时才有效吗？）

感谢:)

Answer 1

应该是：

module.exports = {
  css: {sourceMap: true},

要解决vue css-sourcemaps的所有问题，请参见Vue CLI sourcemaps to style part of vue component file

在vue cli 3中为“ vue-style-loader”激活源映射

1 个答案: