Vue CLI sourcemaps to style part of vue component file

问题

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

回答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

回答2:

Step by step solution:

Enable css sourcemaps in vue.config.js:

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

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)
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.

来源：https://stackoverflow.com/questions/56127998/vue-cli-sourcemaps-to-style-part-of-vue-component-file

标签

javascript

Vue.js

Webpack

source-maps