我一直在构建一个Angular 6库 . 新的过程非常好 .

我正在使用以前版本编写的一些模块及其组件并将其转换 . 这些组件已经过装饰，因此它们的视图和样式分别是外部文件，html和scss .

我正在处理的库还包含在构建过程中使用 scss-bundler 输出到库文件夹的全局样式 . 这些样式不包含任何组件样式 .

我使用“基础”Angular应用程序作为组件的演示站点 . 再次，非常好，我可以使用一个repo来构建我的库并部署它的演示 .

在应用程序中，我从库的dist目录导入我的全局样式：

/* VARIABLES */
@import "../dist/vdl-lib/variables";

/* BOOTSTRAP */
@import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

/* VDL-LIB */
@import "../dist/vdl-lib/styles";

/* DEMO APPLICATION STYLES */
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";

html, body {
  height: 100%;
}

这很有效，此时我的组件设计正确，并应用了全局布局样式 .

现在，这是我遇到问题的地方 . SCSS的原因是能够自定义，对吧？在我的 Headers 组件（位于库中）中，我有一些徽标图像的样式：

.header-logo {
  display: flex;
  align-items: center;
  .name-brand {
    padding-right: $padding-base;
    img {
      height: $logo-height;
    }
  }
}

在 styles.scss （上面显示的那个）中，让我们假设我在 @import "../dist/vdl-lib/styles"; 之前立即输入了一个变量重新赋值 $logo-height: 68px . 当应用程序运行时，组件的徽标大小不会更改 . 我可以看到高度设置为我的内部"variables" scss文件中的原始值 .

这是SCSS或Angular中的替代问题吗？它似乎不是这样！从构建库时我可以看出，输出组件样式被编译为 CSS ！

在查看fesm5输出js后，我得出了这个结论 . 我可以找到组件的装饰器并验证它是CSS .

我尝试在组件装饰器上使用 styles 而不是 styleUrls . 我删除了"variables" scss文件的导入 . 这使输出JavaScript看起来具有SCSS，但运行演示应用程序显示没有应用任何组件样式 . 我在组件中消耗了'm not sure if there is some ordering issue that would be preventing the variables imported in the demo application' s styles.scss . 我还没有尝试在 angular.json 中定义变量，但我对它没有多大希望 .

所以，我的问题是：是否可以使库组件使用并输出SCSS，以便消费应用程序可以自定义任何布局变量？我是否缺少一些配置设置来告诉Angular构建演示应用程序，假设消耗的库中的样式是scss并且需要编译？

angular sass angular-library