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（上面显示的）中，假设我$logo-height: 68px紧接在之前进行了变量重新分配@import "../dist/vdl-lib/styles";。当应用程序运行时，组件的徽标大小不会更改。我可以看到高度设置为我的内部“变量” scss文件中的原始值。

这是SCSS还是Angular中的替代问题？看来不是这样！据我所知，何时构建库，输出组件样式已编译为CSS！

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

我试过使用styles而不是styleUrls在组件装饰器上。我删除了“变量” scss文件的导入。这使输出JavaScript看起来具有SCSS，但是运行演示应用程序显示未应用任何组件样式。我不确定是否存在某些排序问题，以防止在演示应用程序中导入的变量styles.scss在组件中被消耗。我还没有尝试定义变量angular.json，但是我对此没有多大希望。

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

Answer 1

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

@Component({

    selector: 'ngxux-mat-login',

    template: `

       ..html stuff snip snip..
    `,

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

})

我的CSS：

: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上查看我的用法。