[Vuejs]-Carbon design system global scss takes forever to build

1👍

We workaround this by having all the Carbon related styling in the App.vue file, which imports another component (e.g. AppContent.vue) which contains the content for the entire app.

This means that the Carbon styling is only compiled when you make changes to the App.vue, and as everything is in AppContent.vue, you’ll only need to make changes to this file rather than App.vue.

App.vue:

<template>
  <app-content></app-content>
</template>

<script>
import AppContent from "./AppContent.vue";
export default {
  components: { AppContent }
};
</script>

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

AppContent.vue:

<template>
  <!-- the rest of your app -->
</template>

<script>
  // the rest of your app
</script>

<style>
  /* the rest of your app */
</style>

Leave a comment