我一直在编写一个Angular 6库。新的过程非常不错。
我正在将一些以前版本编写的模块和它们的组件转换过来。这些组件已经被装饰,以便它们的视图和样式是外部文件,分别是html和scss。
我正在开发的库还包含全局样式,这些样式会在构建过程中使用scss-bundler输出到库文件夹中。这些样式不包括任何组件样式。
我已经使用“基础”Angular应用程序作为组件的演示站点。再次感觉非常好,我可以使用一个仓库来构建我的库并展示它。
在应用程序中,我从库的dist目录导入了我的全局样式:
在上面展示的
我正在将一些以前版本编写的模块和它们的组件转换过来。这些组件已经被装饰,以便它们的视图和样式是外部文件,分别是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
文件中,假设我在@import "../dist/vdl-lib/styles";
之前立即添加了一个变量重新分配$logo-height: 68px
。但是当应用程序运行时,组件的标志大小没有改变。我可以看到高度设置为我的内部“variables”scss文件中原始值。
这是SCSS或Angular中的替换问题吗?似乎不是!据我所知,当库构建完成后,输出的组件样式被编译为CSS!
在查看fesm5输出js后,我得出了这个结论。我可以找到组件的装饰器并验证它是CSS。
我尝试使用styles
而不是styleUrls
在组件装饰器上。我删除了对“variables”scss文件的导入。这使输出JavaScript似乎具有SCSS,但运行演示应用程序显示未应用任何组件样式。我不确定是否存在某些排序问题,阻止了在演示应用程序的styles.scss
中导入的变量在组件中被消耗。我还没有尝试在angular.json
中定义变量,但我对此并不抱有太大希望。
因此,我的问题是:是否可能使库组件使用和输出SCSS,以便消费应用程序可以自定义任何布局变量?我是否错过了一些配置设置来告诉Angular使用假定消耗库中的样式为scss并需要编译的演示应用程序?