Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

Question

Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

Currently, I am working on a Vue CLI project. After setting up the project and making some development changes, my package.json file now includes:

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' }
        ]
    ]
}

Despite these changes, there are still issues with generating sourcemaps for Vue files (although it works fine for scss files).

https://i.sstatic.net/YVSmk.png

When clicking on the href to the Vue component:

https://i.sstatic.net/TApCx.png

Note:

Multiple versions of the same file in webpack://./
Only part that is within < code > tags is visible in the source editor (this might be causing the issue)
Files from mounted filesystem workspace are not being used

Here is how the original file looks like - it is editable via Chrome DevTools

Is there a way to fix this so that the element inspector tab (style) will provide the correct source target?

EDIT 1
Simplest setup:
Install Vue CLI (3.7)
Add my vue.config.js (to enable sourcemaps)
Run npm run serve
https://i.sstatic.net/8H3UW.png

EDIT 2
Same for Vue CLI 3.5

I have also created a repository with a test project, which is basically a startup project with my configuration. https://github.com/l00k/vue-sample

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

javascript vue.js webpack source-maps

Answer 1

Answer №1

I have yet to come across a solution using Vue CLI, but I have discovered a workaround.

It seems that the issue lies not with Vue CLI, but rather with the vue-loader-plugin in my opinion. This problem persists even when using a clean setup with Vue and webpack.

Upon further investigation, it appears that incorrect sourcemaps are being generated for certain parts of the Vue file. The source for these parts is stripped down to only the content within those tags, which may be why the browser cannot map it correctly. Additionally, the path to the source file in the sourcemap is incorrect.

To address this issue, I created an additional loader for webpack that corrects the sourcemaps. You can find the sm-fix-loader in the repository linked below. While I cannot guarantee that it resolves all issues, it has worked effectively in my cases.

Here's what functions properly:
Build NODE_ENV=development webpack
SCSS inline and in separate file <style src="...">
TS / JS inline and in separate file <script src="...">

HRM

NODE_ENV=development webpack-dev-server --hotOnly

SCSS inline and in separate file <style src="...">
It also refreshes styles without reloading the page itself!
TS / JS inline and in separate file <script src="...">

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

Answer 2

I have yet to come across a solution using Vue CLI, but I have discovered a workaround.

It seems that the issue lies not with Vue CLI, but rather with the vue-loader-plugin in my opinion. This problem persists even when using a clean setup with Vue and webpack.

Upon further investigation, it appears that incorrect sourcemaps are being generated for certain parts of the Vue file. The source for these parts is stripped down to only the content within those tags, which may be why the browser cannot map it correctly. Additionally, the path to the source file in the sourcemap is incorrect.

To address this issue, I created an additional loader for webpack that corrects the sourcemaps. You can find the sm-fix-loader in the repository linked below. While I cannot guarantee that it resolves all issues, it has worked effectively in my cases.

Here's what functions properly:
Build NODE_ENV=development webpack
SCSS inline and in separate file <style src="...">
TS / JS inline and in separate file <script src="...">

HRM

NODE_ENV=development webpack-dev-server --hotOnly

SCSS inline and in separate file <style src="...">
It also refreshes styles without reloading the page itself!
TS / JS inline and in separate file <script src="...">

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

Answer 3

Answer №2

Here is a step-by-step solution:

To begin, activate css sourcemaps in your vue.config.js:

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

Next, transfer all scss from components to individual files, combine them in an index.scss file, and import the index.scss file through App.vue. This method resolves various issues with vue-css-sourcemaps (resulting from Webpack, Devtools, and vue-cli), streamlining your workflow to some extent. For scoping, manually apply #selectors (Importing SCSS file in Vue SFC components without duplication with Webpack)
For further enhancement, you might want to configure CSS extraction for only node_modules, as another unexplained bug disrupts styling as soon as you modify 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, hmr (hot module reloading = reload on edit) will be disabled, but since you don't typically edit scss in your node_modules, extracting only those files should suffice.

All in all, this approach resolved all vue css-related sourcemap issues with Devtools and enabled efficient editing directly in the browser.

Answer 4

Here is a step-by-step solution:

To begin, activate css sourcemaps in your vue.config.js:

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

Next, transfer all scss from components to individual files, combine them in an index.scss file, and import the index.scss file through App.vue. This method resolves various issues with vue-css-sourcemaps (resulting from Webpack, Devtools, and vue-cli), streamlining your workflow to some extent. For scoping, manually apply #selectors (Importing SCSS file in Vue SFC components without duplication with Webpack)
For further enhancement, you might want to configure CSS extraction for only node_modules, as another unexplained bug disrupts styling as soon as you modify 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, hmr (hot module reloading = reload on edit) will be disabled, but since you don't typically edit scss in your node_modules, extracting only those files should suffice.

All in all, this approach resolved all vue css-related sourcemap issues with Devtools and enabled efficient editing directly in the browser.

Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

Answer №1

Answer №2

Similar questions

Achieving the functionality of toggling a div's visibility using jQuery by simply clicking on a

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

What steps can be taken to make the carousel inconsistent when relying on the assigned id in props?

Tips for updating Angular HTML with data received from Socket.IO

What is causing this code to break when using ajax's `data` parameter?

How can you use Dart to uncover the content within an H1 element on an HTML webpage?

Using jQuery to include Chinese characters in a request header

Is it possible to transform an arrow function into a regular function?

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

Downloading Several Files Simultaneously in Chrome

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

When attempting to bind various data to a single div using knockout js, the issue of duplicate records appearing arises

CORS request unsuccessful on Vue.js and Express server

Creating a versatile function to verify the presence of empty values

Vercel deployment issue: Hidden input values not being detected as expected

What is the best way to retrieve the 'items' data stored in this list?

Is there a way to update a useState in TabPanel without causing a re-render?

iOS creates dynamic images with artifacts that appear on a generated and animated canvas