在Nrwl Nx库中导入Angular Material主题

时间:2018-08-15 10:04:29

标签: angular angular-material nrwl

我有一个nrwl nx工作区,其中包含应用程序和库。

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

  

找不到Angular Material核心主题。大多数材料组件可能无法正常工作。有关更多信息,请参考主题指南:https://material.angular.io/guide/theming

我已经在我的list.component.scss中导入了以下行:

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

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

4 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分: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,并遵循命令行指南,然后选择 no 在lib中创建模块。
  2. 这将为您提供一个带src目录的库,其中没有任何内容。
  3. 接下来,您可以继续在styles下添加名为src的新目录。 目录。完成此操作后,您可以在styles目录中添加不同的样式文件。
  4. 更新tsconfig以引用您的新样式文件夹。

    {   {     “ compilerOptions”:{      “路径”:{        “ @ demo / my-liib / *”“:[” libs / my-lib / src / styles / *“]      }   } }

  5. 完成此操作

    • 您可以使用{p>在app/styles.scss中导入该库

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

现在,您将可以使用stylefile.scss中定义的样式。 希望这会有所帮助。

答案 2 :(得分:0)

@angular/material库本身的启发,以及它们如何提供_theming.scss构建的sass-bundler文件(如果我没记错的话)。

一旦我在其中一个库中做到了这一点,就不得不像使用Material本身那样使用它的样式,对于后续项目,我只是选择在我的App的全局样式中使用这些样式,因为我还是没有发布该库。

答案 3 :(得分:0)

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

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]