Angular 6库组件和SCSS

Question

我一直在编写一个Angular 6库。新的过程非常不错。

我正在将一些以前版本编写的模块和它们的组件转换过来。这些组件已经被装饰，以便它们的视图和样式是外部文件，分别是html和scss。

我正在开发的库还包含全局样式，这些样式会在构建过程中使用scss-bundler输出到库文件夹中。这些样式不包括任何组件样式。

我已经使用“基础”Angular应用程序作为组件的演示站点。再次感觉非常好，我可以使用一个仓库来构建我的库并展示它。

在应用程序中，我从库的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 的原因是想要进行自定义，对吧？在我的头部组件（位于库中），我有一些用于标志图片的样式：

.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，但运行演示应用程序显示未应用任何组件样式。我不确定是否存在某些排序问题，阻止了在演示应用程序的styles.scss中导入的变量在组件中被消耗。我还没有尝试在angular.json中定义变量，但我对此并不抱有太大希望。

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

- Mike G

Answer 1

请确保您的styleUrls属性指向库内的本地文件，例如：

@Component({

    selector: 'ngxux-mat-login',

    template: `

       ..html stuff snip snip..
    `,

    styleUrls: [ './mycomponent.component.scss' ]

})

我的 SCSS：

:host {

    .wrapper {

        form {

            display: flex;
            align-items: center;
            justify-content: space-between;

            mat-form-field {

                margin: 10px;

            }

            .description {

                flex: 1;
                margin-right: 25px;

            }

        }

    }

}

这样应该可以解决你的一个问题。

关于从库中“继承”变量的最后一个问题将无法解决。你需要创建一个全局类型目录并创建符号链接到它。编译器对此没有概念（待定）。

如果你需要使用库的示例，请随时查看我的用法https://github.com/mateothegreat/ngxux/tree/master/projects。

- yomateo