我有一个nrwl nx工作区,其中包含应用程序和库。
在我的一个库中,我想导入一个有角度的材质主题,但是在浏览器中,我收到以下警告:
找不到Angular Material核心主题。大多数材料组件可能无法正常工作。有关更多信息,请参考主题指南:https://material.angular.io/guide/theming
我已经在我的list.component.scss
中导入了以下行:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
实际上,我想要的是将其导入到styles.scss
中,但是styles.scss
在libs
中不可用,如果我添加一个,我不知道在哪里引用它。
答案 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
ng g lib demoLib
在工作区中创建一个新的lib,并遵循命令行指南,然后选择 no 在lib中创建模块。styles
下添加名为src
的新目录。
目录。完成此操作后,您可以在styles
目录中添加不同的样式文件。更新tsconfig以引用您的新样式文件夹。
{
{
“ compilerOptions”:{
“路径”:{
“ @ demo / my-liib / *
”“:[” libs / my-lib / src / styles / *
“]
}
}
}
完成此操作
您可以使用{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"
]