Angular NgModule 能否提供一个 style.scss 文件供导入它的人使用?

Question

我想创建一个 Angular (v7( NgModule 来聚合一些 Angular Material 模块，并将其用作我的应用程序中的库：

@NgModule({
imports: [
MatSelectModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
BrowserAnimationsModule
],
exports: [
MatSelectModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
BrowserAnimationsModule
],
})
export class MaterialCustomModule {  }

我还想打包一个 styles.scss 文件，然后将其导入到我的应用程序样式文件中：

@import '~@angular/material/theming';
// Some other common styles I want to have in this module

最后在我的应用程序styles.scss中使用它：

// import my custom style here somehow.

这个共享模块是使用 ng-packagr 构建的：

{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/shared",
"lib": {
"entryFile": "src/public-api.ts"
}
}

我使用"ng build"构建了我的模块，但结果不包含样式文件。

这能做到吗？样式文件是否将模块打包在一起并在父模块中使用？

Answer 1

从module.ts导出CSS似乎是一个不好的缺点，它仅在组件级别受支持。解决方法是让所有模块组件引用单个 css 文件。

但是，您可以使用特定的样式文件定义一个 Angular 库，安装它，然后将样式添加到您的angular.json：

"styles": [
"node_modules/pathToYourCustomLib/style.css"
],

Answer 2

使用 @shahidfoy 和 @Joffrey K 建议，我实现了以下目标：

1. 我在库中创建了一个资产文件夹;
2. 我配置了package.json将这些资产复制到最终 包;
3. 在我的应用程序的angular.json中，我在样式中添加了一个新条目， 和资产部分。