Is it possible to track source styles definition (sass, scss) in Vue while developing?

I'm trying to import styles from external libraries and still keep original reference to it's original library name.

In classic HTML I would create a <style> to minified css in index.html, but I need to make customizations and so I must use those library's source scss, i.e Bulma.

<style>

css

index.html

scss

I need this so I can keep using Chrome's developer tools and see from where the inspected element's styles are coming from and change it at the source or override if needs to be.

Example:

app.vue:

<style lang="scss">
@import "styles/app.scss";
</style>


app.scss:

@charset "utf-8";

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Custom
@import "variables";

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

// Mixed overrides
@import "overrides";


When inspecting an element in Chrome's developer tool, I can see its styles coming from vue's injected styles, even though it's coming originally from a library definitions.
For example Bulma's navbar border-radius appears in styles and not from some sort of a "navbar.sass":

In such a case I knew exactly where that style was coming from, but my workflow will get harder as I add more CSS styles.

How can I use other libraries source scss files and keep having a reference to original style location?

Eventually, of course, I would like to have a single css file for my app.

(I'm using vue-cli 3)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.