Vue CLI sourcemaps to style part of vue component file

l00k commented 5 years ago

Version

3.7.0

Reproduction link

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

Make sure you include my config vue.config.js (to enable sourcemaps)
npm run serve
Create filesystem mount (chrome)
Open browser devtools and inspect any link
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

l00k commented 5 years ago

Really? No one is using this?

haoqunjiang commented 5 years ago

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'm able to edit file after removing lang="scss", though.

l00k commented 5 years ago

@sodatea For me is available to edit if I use suggested solution from here: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-452436539 but of course I lose possibility to use SCSS :(

EDIT: It is not related to Vue CLI itself. I found that in simple webpack project it also works like that. Maybe it is rather related to vue-loader ?

l00k commented 5 years ago

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

vuejs / vue-cli