1

我不知道如何更好地命名这个主题
，但想法如下。我想为组件显示不同的颜色取决于父类。对于这个项目，我使用 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;
 }

就这样。感谢您的任何建议

4

0 回答 0