5

我一直在构建一个 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 的原因是能够自定义，对吧？在我的标题组件（位于库中）中，我有一些徽标图像的样式：

.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 并且需要编译？

4

1 回答 1

0

确保您的 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查看我的用法。

于 2019-01-31T07:15:19.830 回答