Vue CLI sourcemaps to style part of vue component file

Question

I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:

package.json

"dependencies": {
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.1",
    "preload-it": "^1.2.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "fontello-cli": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.2.2"
}

vue.config.js

module.exports = {
    configureWebpack: {
        devtool: process.env.NODE_ENV === 'development'
            ? 'inline-source-map'
            : false,
    },
    css: {
        sourceMap: process.env.NODE_ENV === 'development'
    }
}

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            { useBuiltIns: 'entry' }
        ]
    ]
}

But sourcemaps to vue files are still generated wrongly (to scss files works ok).

After clicking href to vue component

Note:

• lot of versions of same file in webpack://./
• only part that is in tag is visibile in source editor (maybe this is a cause)
• file from mounted filesystem workspace is not used

And this is how original file looks like - it is possible to edit it via Chrome devtools

Is it possible to fix that so also element inspector tab (style) will provide proper source target?

EDIT 1
Simplest setup:
Install Vue CLI (3.7)
Add my vue.config.js (to enable sourcemaps)
Run npm run serve

EDIT 2
Same for Vue CLI 3.5

I also created repo with test project, but like I wrote it is just startup project with my config. https://github.com/l00k/vue-sample

EDIT 3 Vue-cli github issue https://github.com/vuejs/vue-cli/issues/4029

Buckingham

Try using the vue debugger chrome plugin. It also works wonders for debugging Vuex for example. – Personalism

@Devilscomrade as you can see in screens I'm already using vue plugin, but it is not enough – Buckingham

I changed my vue.config to same as yours, but the problem is not present. My href in styles is not MyComponent? [sm].vue it's just MyComponent.vue which takes me to full source. Maybe versions? I have Vue 2.6.6 & vue-clI-service 3.5.0. – Garotte

Also href is taking me to localhost part of tree (not webpack://). – Garotte

@eric99 Could you provide your sample code? Cuz for simple vue cli project it works like presented. – Buckingham

In your sample repo, the problem appears to be <style scoped lang="scss"> in HelloWorld.vue not working with the source maps. Removing the lang attribute, I get the full source in dev console. – Garotte

@eric99 You are right. It shows full source now (it is strange btw) but still does not work with filesystem mount. So I can not save changes – Buckingham

I haven't looked at the issue of saving changes, but it seems to the issue of incomplete source display is specific to scss/sass loader. I tried a bunch of alternate configs and also different devtools (suggested by Linus Borg) but nothing I tried fixes it yet. – Garotte

However, in my app I have one component which imports scss from a separate file, plus has it's own css and postcss sections - the source maps for the component and the scss display ok. – Garotte

@eric99 yea.. for scss from separate (*.scss) file it also works fine. I will consider sumbiting this as bug to vue-cli team. – Buckingham

I would recommend to try in different browser, to check if you still see the source map. I had a similar problem, but was related to my chrome strange cache... Just check if other browsers have different results... – Herculie

@V.Sambor Sambor Same for FF and Chrome :( – Buckingham

Add the link to the github issue you created in an edit to the question – Greatest

you sholud use sourceMapPathOverrides check the docs on vuejs debuging vuejs.org/v2/cookbook/debugging-in-vscode.html. – Pentheus

Answer 1

So far I did not found solution - at least using Vue CLI.
But I have found workaround.

But first of all - 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 and 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.

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

Buckingham

Answer 2

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 (Importing SCSS file in Vue SFC components without duplication with Webpack)

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.

Flighty