在 vue cli 3 中激活“vue-style-loader”的源映射答案

【问题标题】：activating sourcemaps for "vue-style-loader" in vue cli 3在 vue cli 3 中激活“vue-style-loader”的源映射
【发布时间】：2019-12-20 21:06:40
【问题描述】：

我正在尝试为我的 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，除了less（我不使用）之外没有更多的选择。

现在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 搭配才有效果？）

谢谢:)

【问题讨论】：

标签： vue.js webpack vuejs2

【解决方案1】：

应该是：

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

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

【讨论】：