CSS에서 CSS로 각도 cli

설명서를 읽었으며 사용 scss하려면 다음 명령을 실행해야합니다.

ng set defaults.styleExt scss

그러나 그렇게하고 파일을 만들 때 여전히 콘솔 에서이 오류가 발생합니다.

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Angular 6의 경우 공식 문서를 확인하십시오.

참고 : 대한 @angular/cli보다 이전 버전을 6.0.0-beta.6사용하는 ng set대신에 ng config.

기존 프로젝트

기본 css스타일 로 설정된 기존 angular-cli 프로젝트 에서 몇 가지 작업을 수행해야합니다.

1. 기본 스타일 확장명을 scss

.angular-cli.json(Angular 5.x 이상) 또는 angular.json(Angular 6+) 에서 수동으로 변경 하거나 다음을 실행하십시오.

ng config defaults.styleExt=scss

오류가 발생 Value cannot be found.하면 다음 명령을 사용하십시오.

ng config schematics.@schematics/angular:component.styleext scss

(* 출처 : Angular CLI SASS 옵션 )

2. 기존 .css파일의 이름 을 .scss(예 : styles.css 및 app / app.component.css)

3. CLI를 지정하여 스타일을 찾으십시오.

수동으로 파일 확장자 변경 apps[0].styles의를angular.json

4. 새 스타일 파일을 찾으려면 구성 요소를 가리 킵니다.

styleUrls새 파일 이름과 일치하도록 구성 요소를 변경하십시오.

향후 프로젝트

@Serginho가 언급했듯이 ng new명령을 실행할 때 스타일 확장을 설정할 수 있습니다

ng new your-project-name --style=scss

나중에 작성하는 모든 프로젝트의 기본값을 설정하려면 다음 명령을 실행하십시오.

ng config --global defaults.styleExt=scss

ng6부터는 angular.json루트 수준에서 다음 코드를 추가하여 수행 할 수 있습니다 .

수동 변경 .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

angular.json 파일을 엽니 다

1.에서 변경

"schematics": {}

에

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }

2. 에서 변경 (두 곳에서)

"src/styles.css"

에

"src/styles.scss"

그런 다음 모든 .css파일 을 확인하고 이름을 바꾸고 component.ts 파일을 업데이트하십시오..css to .scss

각도 6의 경우

ng config schematics.@schematics/angular:component.styleext scss

참고 : @ schematics / angular는 Angular CLI의 기본 회로도입니다.

Angular CLI를위한 CSS 프리 프로세서 통합 : 6.0.3

새 프로젝트를 생성 할 때 스타일 파일에 원하는 확장자를 정의 할 수도 있습니다.

ng new sassy-project --style=sass

또는 기존 프로젝트에서 기본 스타일을 설정하십시오.

ng config schematics.@schematics/angular:component.styleext scss

모든 주요 CSS 전처리기에 대한 각도 CLI 설명서

기존 프로젝트의 경우 :

에서 angular.json파일

1. 에서 build부분에서 test일부 대체 :

   "styles": ["src/styles.css"], 으로 "styles": ["src/styles.scss"],

2. 바꾸다:

   "schematics": {}, 으로 "schematics": { "@schematics/angular:component": { "style": "scss" } },

ng config schematics.@schematics/angular:component.styleext scss명령 사용 은 작동하지만 구성을 동일한 위치에 두지 않습니다.

프로젝트에서.css 파일 이름 을.scss

새 프로젝트 의 경우이 명령은 모든 작업을 수행합니다.

ng n project-name --style=scss

글로벌 구성

새 버전에는 전역 명령이없는 것 같습니다

사용 명령 :

ng config schematics.@schematics/angular:component.styleext scss

ng6에서는 비슷한 게시물 에 따라이 명령을 사용해야합니다 .

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

이 스레드를 통과 하는 Nrwl 확장 사용자의 경우 : 모든 명령이 Nx에 의해 인터셉트 된 ng generate component myCompent다음 (예 :) AngularCLI로 전달됩니다.

SCSS를 Nx 작업 공간에서 작동시키는 명령 :

ng config schematics.@nrwl/schematics:component.styleext scss

무차별 대입 변경을 적용 할 수 있습니다. 이것은 변화하는 데 효과가 있지만 더 긴 프로세스입니다.

앱 폴더 src / app로 이동

1. app.component.ts 파일을여십시오.

2. 이 코드 styleUrls: ['./app.component.css']를styleUrls: ['./app.component.scss']

3. 저장하고 닫습니다.

같은 폴더에 src / app

1. app.component.css 파일의 확장자를 (app.component.scss)로 바꾸십시오.

2. 다른 모든 구성 요소에 대해이 변경 사항을 따르십시오. (예 : 집, 정보, 연락처 등)

다음은 angular.json 구성 파일입니다. 프로젝트 루트에 있습니다.

1. css를 검색하고 교체하여 (scss)로 변경하십시오 .

2. 저장하고 닫습니다.

마지막으로을 다시 시작하십시오 ng serve -o.

컴파일러가 사용자에게 불평하면 단계를 다시 진행하십시오.

app / src 의 단계를 밀접하게 따르십시오 .

최신 버전의 Angular (v9)에서 아래 코드를 추가해야합니다. angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

다음 명령을 사용하여 추가 할 수 있습니다.

ng config schematics.@schematics/angular:component.style scss