我有一个角度库,用于在两个项目之间共享一些组件、指令等。
最近我试图在库中包含一些样式以在两个项目中重用,但我可以实现 ng build 将其包含在捆绑包中。
¿有什么线索吗?
到目前为止,我发现的唯一方法是运行一个 npm 脚本来复制 dist 文件夹上的 sass 文件(使用 copyfiles(,然后再打包 .tgz 供内部使用。
这是我的包.json:
{
...
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"uiutils_build": "ng build my-library",
"uiutils_styles": "copyfiles -f projects/my-library/src/scss/*.scss dist/@my-namespace/my-library/scss",
"uiutils_pack": "cd dist/@my-namespace/my-library && npm pack",
"uiutils_copy": "copyfiles -f dist/@my-namespace/my-library/*.tgz ../infraestructure.tourbitz.com/packages/@my-namespace/my-library",
"uiutils_package": "npm run uiutils_build && npm run uiutils_styles && npm run uiutils_pack && npm run uiutils_copy"
},
...
}
重要的脚本是uiutils_styles。
¿如何使用?
在我的样式文件中,我包含了以下样式:
@import "~@my-namespace/ui-uitils/scss/my_style.scss";
为了注册全局样式,我在angular.json文件的项目部分做了:
{
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"styles": [
"node_modules/@my-namespace/my-library/scss/my_style.scss",
"src/styles.scss"
],
...
},
...
}
Angular 9 的更新:
在库中,在lib
-directory 旁边,创建一个styles
-目录,然后将其作为资产添加到ng-rollout.yaml
,如下所示:
"assets": [
"styles/**/*.scss"
]
这会将递归地在styles
-目录中找到的所有 SCSS 文件复制到库输出目录中的styles
目录中。