[英]Angular material: include pre-built theme
I wanted to include prebuilt theme for angular app.我想为 angular 应用程序包含预构建的主题。 I included below line in app.component.css.我在 app.component.css 中包含了以下行。
@import "../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";
I was surprised it didn't apply the theme to my app.我很惊讶它没有将主题应用于我的应用程序。 Then from docs I inferred I should include, now it works but I am curious why?然后从我推断我应该包含的文档中,现在它可以工作了,但我很好奇为什么?
@import "@angular/material/prebuilt-themes/indigo-pink.css";
Inside common stylesheet, style.css not app.component.css!在普通样式表中,style.css 不是 app.component.css! and the path (../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css) makes more sense than "~@angular/material/prebuilt-themes/indigo-pink.css"并且路径(../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css)比“~@angular/material/prebuilt-themes/indigo-pink.css”更有意义
I have following questions,我有以下问题,
1.What does it needs import only in style.css an why not inside appcomponent.css? 1.只需要在style.css中导入什么,为什么不需要在appcomponent.css中导入?
2.Though the path ~@angular/material/prebuilt-themes/indigo-pink.cs leads to nothing, how is the angular-material could pick the theme? 2.虽然路径~@angular/material/prebuilt-themes/indigo-pink.cs 什么都没有,但是angular-material 是如何选择主题的?
3.What does '~' mean in the above path? 3.上面路径中的'~'是什么意思?
To give more info, I have included project structure为了提供更多信息,我已经包含了项目结构
All the imports here are referenced relatively.这里所有的进口都是相对引用的。 It can be a hassle to remember how many folders to jump into and out of.记住要跳进和跳出多少个文件夹可能会很麻烦。
If you move your files around, you'll have to update all your import paths.如果您四处移动文件,则必须更新所有导入路径。
Let's look at how we can reference imports absolutely so that TypeScript always looks at the root /src folder when finding items.让我们看看如何绝对引用导入,以便 TypeScript 在查找项目时始终查看根 /src 文件夹。
Our goal for this will be to reference things like so:我们的目标是引用如下内容:
import { HeaderComponent } from '@app/components/header/header.component';
import { FooterComponent } from '@app/components/footer/footer.component';
import { GifService } from '@app/core/services/gif.service';
This is similar to how Angular imports are referenced using @angular like @angular/core or @angular/router.这类似于使用@angular 引用Angular 导入的方式,如@angular/core 或@angular/router。
Setting Up Absolute Paths Since TypeScript is what is in charge of transpiling our Angular apps, we'll make sure to configure our paths in tsconfig.json.设置绝对路径由于 TypeScript 负责转换我们的 Angular 应用程序,我们将确保在 tsconfig.json 中配置我们的路径。
In the tsconfig.json, we'll do two things by using two of the compiler options:在 tsconfig.json 中,我们将使用两个编译器选项做两件事:
baseUrl: Set the base folder as /src paths: Tell TypeScript to look for @app in the /src/app folder baseUrl will be the base directory that is used to resolve non-relative module names. baseUrl:将基本文件夹设置为 /src 路径:告诉 TypeScript 在 /src/app 文件夹中查找 @app baseUrl 将是用于解析非相关模块名称的基本目录。 paths is an array of mapping entries for module names to locations relative to the baseUrl.路径是模块名称到相对于 baseUrl 的位置的映射条目数组。
Here's the original tsconfig.json that comes with a new Angular CLI install.这是新的 Angular CLI 安装附带的原始 tsconfig.json。 We'll add our two lines to compilerOptions.我们将两行添加到 compilerOptions。
{
"compileOnSave": false,
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"]
}
}
}
With that in our tsconfig.json, we can now reference items absolutely!在我们的 tsconfig.json 中,我们现在可以绝对引用项目!
import { HeaderComponent } from '@app/components/header/header.component';
import { FooterComponent } from '@app/components/footer/footer.component';
import { GifService } from '@app/core/services/gif.service';
This is great because we can now move our files around and not have to worry about updating paths everywhere.这很棒,因为我们现在可以四处移动文件,而不必担心到处更新路径。
/ - Site root
~/ - Root directory of the application
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.