Система углеродного дизайна global s css строится вечно

Question

Я пытаюсь применить тему g10 из Carbon Design System (Vue). Но компиляция занимает около 12-15 минут каждый раз, когда я сохраняю файл.

• Есть ли способ добавить стили только для компонентов, которые я использую?
• Если нет, как мне сократить время сборки?
• Есть ли способ удалить часы на файлах s css, чтобы можно было сэкономить время компиляции при работе с файлами Vue?

@import "@carbon/themes/scss/themes";

$carbon--theme: $carbon--theme--g10;

// Use the gray 10 theme
@include carbon--theme();

@import "carbon-components/scss/globals/scss/styles";
@import "@carbon/grid/scss/grid";

Answer 1

Мы обходим это, имея все стили, связанные с углеродом, в файле App.vue, который импортирует другой компонент (например, AppContent.vue), который содержит контент для всего приложения.

Это означает, что стиль Carbon компилируется только при внесении изменений в App.vue, и, поскольку все в AppContent.vue, вам нужно будет только внести изменения в этот файл, а не 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>