Issue with dev-tools style editing in Nuxt.js

Question

I'm working on a Nuxt.js application, and I often need to check styles in my browser's dev-tools, but when I do make a change to the styles in the dev-tools all the styles reset in the browser? Has anyone one else had the same issue? I can't seem to find anything anywhere else about this??

Brownie

Sometimes I got the same issue. It's appear when I'm editing complex dom tree with scoped css. It's not happen with firefox devtools. – Instate

In my case, I was importing a file 2 times – Xl

Answer 1

on nuxt.config.js file, disable the sourceMaps for scss files with the loader property

export default {
  // ...
  build: {
    loaders: {
      scss: { sourceMap: false },
    },
  },
  // ...
}

see in ~> nuxtjs.org/api/configuration-build/#loaders

Plead

Thank you very much, I was close to give up in this issue :) – Brownie

Source maps is an idea that made things so much more complicated than they needed to be... – Albarran

In my case I am using Stylus, so I had to make it stylus: { sourceMap: false } Others might run into this depending on their CSS flavor – Eurasian

This doesn't seem to work with Nuxt v3. Can you provide guidance on how? (my detailed question is at #77475331) – Pelaga