[angular] Angular Material Angular Material 핵심 테마를 찾을 수 없습니다.

Program / 글쓴이

내 Angular2 프로젝트에서 https://material.angular.io/guide/getting-started 에서 최신 재질 플러그인을 설치 합니다. 다음 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';으로 내 구성 요소의 CSS 파일에 추가 합니다. 하지만 내 콘솔에서 Angular는 다음 오류를 보여줍니다.

material.es5.js : 148 Angular Material 핵심 테마를 찾을 수 없습니다. 대부분의 재료 구성 요소는 예상대로 작동하지 않을 수 있습니다. 더 많은 정보를 위해 테마 가이드를 참조하십시오 https://material.angular.io/guide/theming `

재료 구성 요소가 작동하지 않습니다. 뭐가 문제 야?

답변

src 폴더 에있는 style.css에 아래 코드를 삽입 하십시오 .

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

prebuilt-themes 폴더 에서 CSS를 선택할 수 있습니다 .

답변

다음 단계로 작업했습니다.

1)이 (또는 다른) 머티리얼 테마를 메인 CSS 파일로 가져옵니다 :

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2) 또한이 기본 CSS 파일을 app.component 파일 에 등록해야 합니다.

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) 필요한 구성 요소가 app.module 파일의 @ angular / material 에서 가져 왔는지 다시 확인 하십시오.

import { MdCardModule, MdInputModule } from '@angular/material';

답변

해당 코드를 angular-cli.json 파일에 넣으십시오.

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

그것은 나를 위해 잘 작동합니다

답변

Karma로 테스트하는 동안 이런 일이 발생하면 파일 pattern의 files목록에 다음 을 추가 karma.config.js하십시오.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

자세한 내용은 여기를 참조하십시오. https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-include-core-theme-in-test-suite

답변

Angular-CLI를 사용하는 경우 테마 파일 (예 : .angular-cli.json 파일의 “candy.scss”)에 대한 참조를 만들어야합니다. 자세히보세요. * .scss가 있습니까? Sass 파일입니다. 여기에서 정보를 찾으십시오 : Angular Material 2 Theming instructions . 따라서 .angular-cli.json의 styles 속성 아래에 “themes / styles.css”옆에 “themes / candy.scss”를 추가하십시오. 내 프로젝트에 “테마”라는 폴더가 있습니다. styles.css와 candy.scss를 테마 폴더에 넣었습니다. 이제 Angular-CLI가 테마를 찾을 수 있습니다.

답변

더하다:

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

너의 ~에게 style.css

답변

다음 줄을 귀하의 src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

다른 CSS 클래스도 시도해 볼 수 있습니다. 사용 가능한 수업은 다음과 같습니다.

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

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';