angular-cli angular2 router - 각도 CLI SASS 옵션





7 Answers

각도 6+에 대한 업데이트

  1. 새 프로젝트

    Angular CLI 로 새 프로젝트생성 할 때 css 전처리기를 다음과 같이 지정하십시오.

    • SCSS 구문 사용

      ng new sassy-project --style=scss
      
    • SASS 구문 사용

      ng new sassy-project --style=sass
      
  2. 기존 프로젝트 업데이트

    실행 하여 기존 프로젝트의 기본 스타일 설정

    • SCSS 구문 사용

      ng config schematics.@schematics/angular:component.styleext scss
      
    • SASS 구문 사용

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

    위의 명령은 작업 공간 파일 (angular.json)을

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

    여기서 styleext 는 선택에 따라 scss 또는 sass 수 있습니다.



원문 답변 (Angular <6)

새 프로젝트

새 프로젝트의 경우 원하는 스타일의 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"
          ],
    
title event subscribe

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

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

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

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




angular-cli에 항상 scss를 사용하도록 알립니다.

프로젝트를 생성 할 때마다 - --style scss 전달하지 않으려면 다음 명령을 사용하여 --style scss 의 기본 구성을 전체적으로 조정할 수 있습니다.

ng set --global defaults.styleExt scss


angular-cli의 일부 버전에는 위의 전역 플래그를 읽는 중 버그가 있습니다 ( 링크 참조 ). 버전에이 버그가있는 경우 다음을 사용하여 프로젝트를 생성하십시오.

ng new some_project_name --style=scss



나는 scss 파일로 움직이는 것에 매우 고독한 잡았다를 알아 차렸다! !! 하나 styleUrls: ['app.component.scss'] 에서 simple : styleUrls: ['app.component.scss'] 에서 styleUrls: ['./app.component.scss'] ( ./ 추가)로 이동 app.component.ts

새 프로젝트를 생성 할 때 어떤 작업을하지만, 기본 프로젝트가 만들어 졌는지는 알 수 없습니다. ng 빌드 중에 해결 오류가 표시되면이 문제를 확인하십시오. 단지 ~ 1 시간이 걸렸습니다.




ng set --global defaults.styleExt=scss 는 ng6 이후 사용되지 않습니다. 다음 메시지가 표시됩니다.

get / set은 config 명령을 위해 더 이상 사용되지 않습니다.

다음을 사용해야합니다.

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

특정 프로젝트를 타겟팅하려면 ({project}를 프로젝트 이름으로 대체하십시오) :

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



다음은 각진 CLI 6 프로젝트에서 작동해야합니다. 즉 당신이 얻는다면 :

get / set은 config 명령을 위해 더 이상 사용되지 않습니다.

npm install node-sass --save-dev

그런 다음 ( 프로젝트 이름을 변경했는지 확인 )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

기본 프로젝트 이름을 사용하려면 다음을 사용하십시오.

ng config defaultProject

그러나 : 프로젝트를 6에서 6으로 마이그레이션 한 경우에는 구성이 존재하지 않을 가능성이 큽니다. 어떤 경우에는 다음을 얻을 수 있습니다.

잘못된 JSON 문자 : 0에서 0의 "s"

따라서 angular.json 을 수동으로 편집해야합니다.

다음과 같이 보일 것입니다 (styleex 속성을 기록함).

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

나에게 지나치게 복잡한 스키마처럼 보입니다. ¯_ (ツ) _ / ¯

이제 모든 CSS / less 파일을 scss로 변경하고 구성 요소 등에서 모든 참조를 업데이트해야합니다. 그러나 잘 수행해야합니다.




CSS 전 처리기 통합 각도 CLI는 모든 주요 CSS 전처리기를 지원합니다.

이러한 전 처리기를 사용하려면 구성 요소의 styleUrl에 파일을 추가하기 만하면됩니다.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

새 프로젝트를 생성 할 때 스타일 파일에 사용할 확장을 정의 할 수도 있습니다.

ng new sassy-project --style=sass

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

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

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

CLI가 인라인 스타일에 선행 처리기를 적용 할 수 없기 때문에 @ Component.styles 배열에 추가 된 스타일 문자열을 CSS에 작성해야합니다.

각도 문서 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors 기반으로합니다.




1 단계. npm을 사용하여 bulma 패키지 설치

npm install --save bulma

2 단계. angular.json을 열고 다음 코드를 업데이트하십시오

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

그게 전부 야.

Bulma 도구를 쉽게 노출하려면 angleParprocessorOptions를 angular.json에 추가하십시오.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

불마 + 앤 6




Related