각도 2 - 전체 CSS 파일

각도 2에 전체 CSS 파일을 추가 할 수 있습니까? 현재 버튼 스타일이 같은 여러 구성 요소가 있지만 각 구성 요소에는 스타일이 적용된 고유 한 CSS 파일이 있습니다. 이것은 변화를 좌절시키는 것입니다.각도 2 - 전체 CSS 파일

내가 추가 스택 오버플로 어딘가에 읽어

import { ViewEncapsulation } from '@angular/core'; //add this 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None   //add this 
})

그래서 내가 루트 구성 요소의 ViewEncapsulation 라인을 추가, 다음 루트 응용 프로그램의 CSS (app.component.css) 제거에 CSS 스타일을 추가 개별 구성 요소 CSS 파일의 CSS 스타일링이 작동하지 않습니다.

확실히 글로벌 CSS 파일을 추가하는 방법이 있습니까? 글로벌 CSS 파일에 액세스 할 수 있도록 개별 구성 요소에 무언가를 추가해야합니까?

출처

2016-10-26 fila

이것이 올바른 진행 방법입니다. 그것은 작동해야합니다. 작동하지 않는다고 말하면 정확히 어떻게됩니까? 하위 구성 요소 버튼이 모두 다릅니 까? 앱 구성 요소 템플릿에 버튼을 추가하면 버튼의 모습은 무엇입니까? 그것은 올바른 측면을 가지고 있습니까? – chaiyachaiya

글로벌 스타일이 전혀 적용되지 않습니다. – fila

괜찮 았는데)) – Devsullo

메인 HTML 파일에서 CSS를 가져 오기하기 만하면됩니다.

출처

2016-10-26 23:34:22 Abraham

Angular 2 CLI가 실제로 'styles.css'파일을 생성하여 index.html 파일 내에 전역 CSS 스크립트로 포함 시켰습니다. 방금 파일을 열어 "/ *이 파일에 전역 스타일을 추가하고 다른 스타일 파일을 가져올 수도 있습니다 * /". 고맙습니다 axl_80. – fila

환영합니다. 제가 도와 드릴 수있어서 기쁩니다. 귀하의 프로젝트에 행운을 빕니다;) – Abraham

+10

코드 예제는 좋을 것입니다 –

오늘부터 각도 4를 사용하여 src/styles.css 파일에 글로벌 스타일을 작성하십시오. 해당 파일은 ng build을 실행하면 styles.bundle.js에 추가됩니다.

스타일 파일은 .angular-cli.json 파일의 Angular-CLI에 등록됩니다. styles 배열이 apps 배열 안에 있으며, 기본값은 styles.css 인 단일 항목 (경로는 src 디렉토리를 기준으로 함)입니다. SCSS를 사용하려면 해당 항목의 확장자를 scss으로 변경 한 다음 src/styles.css 파일의 확장자도 변경하십시오.

"defaults": { 
    "styleExt": "css", 
    "component": {} 
}

및 scss에 styleExt의 값을 변경 :

당신이 (예를 들어, 구성 요소) 미래의 스타일 파일을 원하는 경우

이 같은 파일이 말에이 위치에 기본적으로 scss 수 있습니다.

출처

2017-04-24 11:11:18 Parziphal

이것은 앵귤러의 새로운 버전과 더 관련이 있기 때문에이 질문에 대한 중요한 추가 사항입니다. 나는 Angular CLI를 새로 설치하고 최근에 CSS 가져 오기 (이 질문에서 선택한 답변에 따라)를 수동으로 포함하여 (습관적으로) 새 프로젝트를 만들었습니다. 이로 인해 브라우저 콘솔에 오류가 발생했습니다. HTML에서 수동 CSS 가져 오기 문을 제거한 후에는 styles.css의 CSS 스타일이 적용되고 있음을 발견했습니다. 새 프로젝트를 시작하기 전에이 대답을 보지 못했습니다. 불행했습니다. – fila

이것은 올바른 대답이어야합니다. – Juan

이 질문을하는 시점에서 이것은 올바른 대답이 아니 었습니다. Angular로 업데이트하기 위해 '정답'을 업데이트합니까? * 기술적으로 * Angular 2 ... – fila

각도 2 - 전체 CSS 파일

답변

관련 문제