Vue CLI sourcemaps to style part of vue component file

[l00k]

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

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

Really? No one is using this?

[haoqunjiang]

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]

@sodatea
For me is available to edit if I use suggested solution from here:
#2978 (comment)
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]

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 <style> and <script>
Source for those part is strip to only content of those tags. That is probably why browser could not map it to source. Also path to source file in sourcemap is wrong.

I have prepared additional loader for webpack which fixes those sourcemaps.
Check sm-fix-loader in repo below.
I dont know does it fix all issues, but at least in my cases it works awesome.

Note it is workaround for webpack setup (not Vue CLI)

What works ok:
Build NODE_ENV=development webpack
SCSS inline (in vue file) and in separate file <style src="...">
TS / JS inline (in vue file) and in separate file <script src="...">

HRM NODE_ENV=development webpack-dev-server --hotOnly
SCSS inline (in vue file) and in separate file <style src="...">
It also reloads styles without reloading page itself :D
TS / JS inline (in vue file) and in separate file <script src="...">

Repo with working example:
https://github.com/l00k/starter-vue

[bkarlson]

Step by step solution:

1. Enable css sourcemaps in vue.config.js:

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

2. Move all scss from components to separate files, collate them in index.scss and import index.scss via App.vue. This will solve lots of problems with vue-css-sourcemaps (caused by Webpack, Devtools and vue-cli), and somewhat simplify your workflow. If you need scoping, scope manually via #selectors (https://stackoverflow.com/questions/53869033/importing-scss-file-in-vue-sfc-components-without-duplication-with-webpack/61307538#61307538)

3. To go further, you may need to set up CSS extraction for node_modules only, as another mysterious bug ruins styling as soon as you touch any css in devtools:

devtool: 'cheap-source-map',
    plugins: process.env.NODE_ENV === 'development' ?
      ([new MiniCssExtractPlugin()]) : [],
    module: {
      rules: [
        	process.env.NODE_ENV === 'development' ?
          (
            {
              // test: /node_modules/,
              test: /node_modules\/.+\.scss/,

              use: [
                MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 2,
                    sourceMap: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: () => [require('autoprefixer')],
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {sourceMap: true}
                }
              ]
            }) : {}
      ],
    }
    ```

If you extract all css, you'll loose hmr (hot module reloading = reload on edit), but since you don't really edit scss in your `node_modules`, you extact only them. 


All in all, this fixed all vue css-related sourcemap issues with Devtools and enabled hot-editing right in browser.

[ITenthusiasm]

Any updates on this issue or plans to fix it?

I tried l00k's solution in Vue and it didn't work for me. I would agree that it's a loader issue though from what I've seen with my apps.