css - 碳设计系统全球scss需要永远建立

Question

我正在尝试从 Carbon Design System(Vue) 应用 g10 主题。但是每次我保存文件时编译大约需要 12-15 分钟。

• 有没有办法只为我使用的组件添加样式？
• 如果没有，如何减少构建时间？
• 有没有办法删除对 scss 文件的监视，以便在处理 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

我们通过在文件中包含所有与 Carbon 相关的样式来解决此问题，该App.vue文件导入另一个AppContent.vue包含整个应用程序内容的组件（例如 ）。

这意味着只有在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>