Angular 6 个库组件和 SCSS

Question

我一直在构建一个 Angular 6 库。新工艺挺好的

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

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

我使用 "base" 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 组件（位于库中）中，我有一些徽标图像的样式：

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

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

这是 SCSS 或 Angular 中的替换问题吗？好像不是这样！据我所知，当库构建时，输出组件样式被编译为 CSS!

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

我尝试在组件装饰器上使用 styles 而不是 styleUrls。我删除了 "variables" scss 文件的导入。这使得输出 JavaScript 看起来有 SCSS 但运行演示应用程序显示正在应用 none 的组件样式。我不确定是否存在一些排序问题会阻止组件使用演示应用程序 styles.scss 中导入的变量。我还没有尝试在 angular.json 中定义变量，但我对此不抱太大希望。

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

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;

            }

        }

    }

}

这样应该可以解决您的一个问题。关于库中 "inheriting" 变量的最后一个问题将不起作用。您将必须创建一个全局类型目录并创建指向它的符号链接。编译器没有这个概念（待定）。

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

Angular 6 个库组件和 SCSS

Angular 6 Library Components and SCSS

sass

angular

angular-library