0

i'm trying to activate sourcemaps for everything on my cli3 project.

so far i have

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',
  // ...

according to this https://cli.vuejs.org/config/#css-sourcemap, there is no more option except less (which i don't use).

now vue inspect gives me:

          {
            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
            }

how can I activate sourcemaps for vue component styles? also, configurewebpack.devtool seems to have no effect at all. (or does it only have an effect when paired with loaderOptions?)

thanks :)

devman
  • 641
  • 1
  • 8
  • 26

1 Answers1

1

Should be:

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

To fix all issues with vue css-sourcemaps, see Vue CLI sourcemaps to style part of vue component file

Benny K
  • 1,107
  • 12
  • 9