[angular] 각도 CLI SASS 옵션



Answers

새 프로젝트

새 프로젝트의 경우 원하는 스타일의 SASS / SCSS에 따라 --style=sass 또는 --style=scss 옵션을 설정할 수 있습니다

  • SASS 구문 사용

    ng new project --style=sass 
    
  • SCSS 구문 사용

    ng new project --style=scss 
    

그런 다음 node-sass 를 설치 node-sass .

npm install node-sass --save-dev

기존 프로젝트 업데이트

angular-clinode-sass sass 파일을 컴파일하려면,

npm install node-sass --save-dev 

node-sass 를 설치 node-sass . 그때

  • SASS 구문

    ng set defaults.styleExt sass
    
  • SCSS 구문

    ng set defaults.styleExt scss
    

기본 styleExt를 sass로 설정하는 방법

(또는)

.angular-cli.json 에서 원하는 구문을 위해 styleExtsass 또는 scss 로 변경 styleExt .

  • SASS 구문

    "defaults": {
         "styleExt": "sass",
    }
    
  • SCSS 구문

    "defaults": {
         "styleExt": "scss",
    }
    

그것은 컴파일러 오류를 생성했지만.

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

.angular-cli.json 의 줄을 변경하여 수정 된,

"styles": [
        "styles.css"
      ],

어느 쪽인가에,

  • SASS 구문

    "styles": [
            "styles.sass"
          ],
    
  • SCSS 구문

    "styles": [
            "styles.scss"
          ],
    
Question

저는 앵귤러를 처음 접했고 Ember 커뮤니티에서 왔습니다. Ember-CLI 기반의 새로운 Angular-CLI를 사용하려고했습니다.

새 Angular 프로젝트에서 SASS를 처리하는 가장 좋은 방법을 알아야합니다. ember-cli-sass 의 핵심 구성 요소 중 몇 가지가 Ember-CLI 모듈에서 실행되기 때문에 ember-cli-sass 레포를 사용해 보았습니다.

그것은 일을하지 못했지만 뭔가 잘못 잘못 입력했는지 확실하지 않습니다.

또한 새로운 Angular 프로젝트에서 스타일을 구성하는 가장 좋은 방법은 무엇입니까? 구성 요소와 동일한 폴더에 sass 파일을 갖는 것이 좋습니다.




글로벌 기본값으로 설정

ng set defaults.styleExt=scss --global




Mertcan이 말했듯이, scss를 사용하는 가장 좋은 방법은 그 옵션으로 프로젝트를 만드는 것입니다 :

ng new My_New_Project --style=scss 

Angular-cli는 다음 명령을 사용하여 프로젝트를 만든 후 기본 CSS 사전 처리기를 변경하는 옵션도 추가합니다.

ng set defaults.styleExt scss

자세한 내용은 해당 설명서를 참조하십시오.

https://github.com/angular/angular-cli




나는 scss 파일로 움직이는 것에 매우 고독한 잡았다를 알아 차렸다! !! 하나는 단순한 것으로부터 이동해야합니다 :

styleUrls: ['app.component.scss']

~에

styleUrls: ['./app.component.scss']

새로운 프로젝트를 생성 할 때 어떤 일을하지만, 기본 프로젝트가 생성 될 때가 아닙니다. ng 빌드 중에 해결 오류가 표시되면이 문제를 확인하십시오. 단지 ~ 1 시간이 걸렸습니다.




Related