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";。当应用程序运行时，组件的徽标大小不会更改。我可以看到高度设置为内部“变量” ssss文件中的原始值。

这是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' ]

})

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

Angular 6库组件和SCSS

1 个答案: