如何使用库中的 scss 文件创建组件 angular
How to create component with scss files in library angular
我创建了一个 scss 应用程序并关联了一个库。
我想在这个库中创建带有 .scss 文件的组件。但是当我在库中创建一个组件时,angular 会自动为它分配一个 css 文件。
我使用 scss 选项创建了应用程序(名为 vega-libraries),但没有创建库(polaris-common)
这是带有树视图的项目的屏幕截图,我尝试更改 toto.scss
中 totoComponent
的 css 文件,正如您在屏幕截图中看到的那样。
但是当我这样做时,它会产生这种类型的错误:
Error: The loader "C:/Users/........toto/toto.component.css" didn't
return a string.
如何使用 .scss 文件在我的库中创建组件?
感谢您的帮助
编辑:
"polaris-common": {
"projectType": "library",
"root": "projects/polaris-common",
"sourceRoot": "projects/polaris-common/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/polaris-common/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/polaris-common/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/polaris-common/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/polaris-common/src/test.ts",
"tsConfig": "projects/polaris-common/tsconfig.spec.json",
"karmaConfig": "projects/polaris-common/karma.conf.js"
}
}
}
}
},
"defaultProject": "vega-libraries"
}
这是针对 Angular12 的。在以前的版本中它可能有所不同。要在做ng create component
时将scss
设置为默认样式格式,在你项目下的angular.json
中,添加schematics
:
"projectType": "library",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
在现有组件中,更改 styleUrls
以反映重命名的 scss
文件的路径,而不是 css
// toto.component.ts
@Component({
styleUrls: ['./toto.component.scss']
})
ng g c "filename" --style=scss
这是我实际找到的最好的方法。
我创建了一个 scss 应用程序并关联了一个库。 我想在这个库中创建带有 .scss 文件的组件。但是当我在库中创建一个组件时,angular 会自动为它分配一个 css 文件。
我使用 scss 选项创建了应用程序(名为 vega-libraries),但没有创建库(polaris-common)
这是带有树视图的项目的屏幕截图,我尝试更改 toto.scss
中 totoComponent
的 css 文件,正如您在屏幕截图中看到的那样。
但是当我这样做时,它会产生这种类型的错误:
Error: The loader "C:/Users/........toto/toto.component.css" didn't return a string.
如何使用 .scss 文件在我的库中创建组件?
感谢您的帮助
编辑:
"polaris-common": {
"projectType": "library",
"root": "projects/polaris-common",
"sourceRoot": "projects/polaris-common/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/polaris-common/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/polaris-common/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/polaris-common/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/polaris-common/src/test.ts",
"tsConfig": "projects/polaris-common/tsconfig.spec.json",
"karmaConfig": "projects/polaris-common/karma.conf.js"
}
}
}
}
},
"defaultProject": "vega-libraries"
}
这是针对 Angular12 的。在以前的版本中它可能有所不同。要在做ng create component
时将scss
设置为默认样式格式,在你项目下的angular.json
中,添加schematics
:
"projectType": "library",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
在现有组件中,更改 styleUrls
以反映重命名的 scss
文件的路径,而不是 css
// toto.component.ts
@Component({
styleUrls: ['./toto.component.scss']
})
ng g c "filename" --style=scss
这是我实际找到的最好的方法。