2

我有一个带有应用程序和库的nrwl nx工作区。

在我的一个库中，我想导入一个角度材质主题，但在浏览器中我收到以下警告：

找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南：https ://material.angular.io/guide/theming

我在我的导入以下行list.component.scss：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

实际上，我想要的是在 中导入它styles.scss，但styles.scss在中不可用libs，如果我添加一个，我不知道在哪里引用它。

4

4 回答 4

2

没有任何问题，我使用 Angular Material 将 Angular Material 导入到 Nx 中ng add @angular/material，请记住在angular.json设置中

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]
于 2020-03-04T14:44:40.040 回答
0

您可以尝试在应用程序特定的 style.css 中添加主题吗？

这就是我的设置。我有一个包含 Login.component 的库。模板正在使用材料组件。我在应用程序 style.css 中添加了样式导入，它导入了这个库以使用登录组件。它对我有用。

于 2018-09-23T05:27:39.067 回答
0

@DAG我对我的一个项目做了类似的事情。这些是我做过的几件事。

（如果您还没有安装它npm install --save @angular/material @angular/cdk @angular/animations）

一旦你安装了材料设计并在 node_modules 中可用对于这个例子，我们有工作区名称demo和样式文件名demo-styles.scss和库名my-lib

  1. ng g lib demoLib使用并遵循命令行指南在您的工作区中创建一个新库，并选择否在 lib 中创建模块。
  2. 这将为您提供一个包含 src 目录的库，其中没有任何内容。
  3. 接下来，您可以继续在目录styles下添加名为的新src 目录。完成此操作后，您可以在styles目录中添加不同的样式文件。

  4. 更新 tsconfig 以引用您的新样式文件夹。

    { { "compilerOptions": { "path": { "@demo/my-liib/ *": ["libs/my-lib/src/styles/ *"] } } }

  5. 完成此操作后，

    • app/styles.scss你可以导入这个库

      @import demo/my-lib/styles/demo-styles.scss.

现在您将能够使用 stylefile.scss 中定义的样式。希望这可以帮助。

于 2019-06-05T01:39:07.473 回答
-1

@angular/material从库本身以及它们如何提供_theming.scss构建的文件中获得灵感sass-bundler（如果我没记错的话）。

一旦我在我的一个库中这样做了，我就不得不像使用 Material 本身一样使用它的样式，对于后续项目，我只是选择在我的应用程序的全局样式中使用这些样式，因为我无论如何都没有发布lib。

于 2019-06-18T17:29:00.177 回答