css - webpack と vue を使用して CSS の「スマートな」ネストされたルールを作成する方法

Question

このトピックに適切な名前を付ける方法はわかりません
が、アイデアは次のとおりです。親クラスに応じて、コンポーネントに異なる色を表示したい。このプロジェクトでは、webpack、vue、vue-loader、sass を使用します。

私はsassファイルを持っています。このファイルには、ページのすべての設定が含まれており、特定のページにどの色を使用する必要がありますか

    $colors: ".page-home" blue, ".page-about" green;

    @each $i in $colors {
       $page: nth($i, 1);
       $color: nth($i, 2);

      #{$page} .component_1, .component_2, .component_n {
        color: $color;
      }
   }

コンポーネントが vue コンポーネントとして記述されています

@import "colors"; 
.compoent_1 {
  border:1px solid black
}

問題は、多くのコンポーネントがあり、色ファイルを一貫してサポートすることが非常に難しいことです。新しいコンポーネントを追加したり、古いコンポーネントを削除したりするときは、常にこのファイルに移動して編集する必要があり、面倒です

したがって、解決策はメインファイルを作成することです。

.page-home:blue;
.page-about: green;

次のスタイルでコンポーネントを書きたい

.component {
  border:1px solid black;
  color: $PAGE_COLOR;
}

このコードは生成する必要があります

.page-home .component_1, .component_2, .component_n {
  color: blue;
 }
.page-about .component_1, .component_2, .component_n {
 color: green;
 }

それで全部です。提案をありがとう