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"
        ],