I'm trying to do some static analysis of my application's fairly complicated frontend, which is written in Vue.js. In particular, I'd like to be able to analyze the CSS that's generated. (See for example an earlier question I wrote.)

I've gotten to the point of being able to do the traversal of a vanilla CSS file, and then I realized that the actual CSS I want to analyze is buried in .vue files where we've defined everything in one place.

For example:

<template>
  <div>
    <div id="informationApp"><img class="logo" src="/elephant.png">
      <div id="infoContent">
        <nuxt></nuxt>
      </div>
    </div>
  </div>
</template>

<style lang="sass">
@import '~assets/theme'

#informationApp
  width: 100vw
  height: 100vh

Is there a way to bake out the "compiled" (but preferably still human-readable) CSS or SASS that's contained in all my Vue.js files so that I can run my static analyzer on them?