Vue-cli: Vue CLI sourcemaps to style part of vue component file

Created on 20 May 2019  路  5Comments  路  Source: vuejs/vue-cli

Version

3.7.0

Reproduction link

https://github.com/l00k/vue-sample

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Linux Mint 19 (Tara)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
    Yarn: Not Found
    npm: 6.4.1 - ~/.nvm/versions/node/v8.15.0/bin/npm
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 66.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.7.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.7.0 
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-pwa: ^3.7.0 => 3.7.0 
    @vue/cli-service: ^3.7.0 => 3.7.0 
    @vue/cli-shared-utils:  3.7.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.10 => 2.6.10 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.3 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.7.0

Steps to reproduce

  1. Make sure you include my config vue.config.js (to enable sourcemaps)
  2. npm run serve
  3. Create filesystem mount (chrome)
  4. Open browser devtools and inspect any link
  5. Check styles subtab to track where style is defined, click on link to source tab

What is expected?

Sourcemap should point to full file component with edit available (as filesystem mount done)

What is actually happening?

Source tab presents only few lines with SCSS code (only style tag content). Edit is not available.


If you remove attribute lang="scss" full source of vue file will be presented, but still without option to edit file (via filesystem mount)
I also created question with bounty on SO
https://stackoverflow.com/questions/56127998/vue-cli-sourcemaps-to-style-part-of-vue-component-file

bug help wanted

Most helpful comment

As I wrote at SO
https://stackoverflow.com/questions/56127998/vue-cli-sourcemaps-to-style-part-of-vue-component-file/57228676#57228676

I have found something..
whole problem is not about Vue CLI but it is something with vue-loader-plugin IMO. I think so because while using clean setup with vue and webpack I also see that problem.

I have found out that it is related to wrong sourcemap generated for those parts of Vue file