Angular 6 库组件和 SCSS

Posted 2023-03-06

【中文标题】Angular 6 库组件和 SCSS

【英文标题】：Angular 6 Library Components and SCSS

【发布时间】：2019-02-17 02:50:10

【问题描述】：

我一直在构建一个 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（如上所示）中，假设我在@import "../dist/vdl-lib/styles"; 之前立即放入了变量重新赋值$logo-height: 68px。当应用程序运行时，组件的徽标大小不会改变。我可以看到高度设置为我内部“变量”scss 文件中的原始值。

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

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

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

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

【参考方案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 的用法。