我在Angle 8中开发了不同的项目,并且具有相同的样式。
我想使用相同的SCSS
文件,以便将来可以在一处进行更改。
我在下面尝试过,但这对我不起作用。
Compiling css in new Angular 6 libraries
请引导正确的方向。
我在Angle 8中开发了不同的项目,并且具有相同的样式。
我想使用相同的SCSS
文件,以便将来可以在一处进行更改。
我在下面尝试过,但这对我不起作用。
Compiling css in new Angular 6 libraries
请引导正确的方向。
例如,您可以:
npm
或yarn
包(可以是私有的)。 package.json
依赖项有用的链接:
https://docs.npmjs.com/creating-and-publishing-private-packages
https://docs.npmjs.com/creating-and-publishing-an-org-scoped-package
其他选项可以是:
package.json
和angular.json
创建单个角度项目package.json
中有不同的命令来运行不同的项目(如果需要同时运行,请在不同的端口上运行)angular.json
中的不同项目具有不同的配置我的问题在@qiAlex的回答下得到了解决,但是我在这里发布了解决此类问题的完整过程。
我从https://github.com/linnenschmidt/build-ng-packagr得到了解决方案。
可以通过创建一个角度库来解决这类问题,但是ng-packagr的默认角度构建设计师 @ angular-devkit / build-ng-packa 不会复制库资产。
@ linnenschmidt / build-ng-packagr 可用于复制库资产。该Angular Build Architect将复制库构建中的所有资产。
在您的角度项目中安装 @ linnenschmidt / build-ng-packagr 。
npm install @ linnenschmidt / build-ng-packagr --save-dev
或
添加纱线@ linnenschmidt / build-ng-packagr --dev
I)。用@ linnenschmidt / build-ng-packagr:build替换您的库的构建架构师。
"architect": {
"build": {
"builder": "@linnenschmidt/build-ng-packagr:build",
II)。像通常对应用程序一样,将资产全局规则添加到选项部分。
"options": {
"tsConfig": "projects/weave-styles/tsconfig.lib.json","project": "projects/weave-styles/ng-package.json","assets": [
"src/assets"
]
}
最终的angular.json文件可能类似于以下示例:
"weave-styles": {
"projectType": "library","root": "projects/weave-styles","sourceRoot": "projects/weave-styles/src","prefix": "lib","architect": {
"build": {
"builder": "@linnenschmidt/build-ng-packagr:build","options": {
"tsConfig": "projects/weave-styles/tsconfig.lib.json","assets": [
"src/assets"
]
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "projects/weave-styles/src/test.ts","tsConfig": "projects/weave-styles/tsconfig.spec.json","karmaConfig": "projects/weave-styles/karma.conf.js"
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"projects/weave-styles/tsconfig.lib.json","projects/weave-styles/tsconfig.spec.json"
],"exclude": [
"**/node_modules/**"
]
}
}
}
}