Angular CLI SAS 옵션

Angular CLI SAS 옵션

앵귤러는 처음이고 엠버 커뮤니티에서 왔습니다.Ember-CLI 기반의 새 Angular-CLI를 사용하려고 합니다.

새로운 Angular 프로젝트에서 SAS를 처리하는 가장 좋은 방법을 알아야 합니다.Angular-CLI의 많은 핵심 구성 요소가 Ember-CLI 모듈에서 실행되기 때문에 레포를 사용하여 재생되는지 확인했습니다.

작동하지 않았지만 제가 잘못 구성한 것이 있는지 다시 한 번 확신할 수 없습니다.

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

Angular CLI 버전 9(Angular 9 프로젝트를 만드는 데 사용됨)가 이제 선택됩니다.style 도식에서.styleext다음과 같은 명령을 사용합니다.
ng config schematics.@schematics/angular:component.style scss
그리고 그 결과 각진.json은 다음과 같이 보일 것입니다.

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

기타 가능한 솔루션 및 설명:

SAS를 지원하는 각도 CLI를 사용하여 새 프로젝트를 생성하려면 다음을 시도하십시오.

ng new My_New_Project --style=scss 

사용할 수도 있습니다.--style=sass만약 당신이 차이점을 모른다면, 이 짧고 쉬운 기사를 읽고, 만약 당신이 여전히 모른다면, 그냥 가세요.scss학문을 계속하다

각도 5 프로젝트가 있는 경우 이 명령을 사용하여 프로젝트의 구성을 업데이트합니다.

ng set defaults.styleExt scss

최신 버전의 경우

Angular 6이 CLI를 사용하여 기존 프로젝트에 새 스타일을 설정하는 경우:

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

또는 Angular.json에 직접:

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

Angular 6+에 대한 업데이트

새 프로젝트

Angular CLI를 사용하여 새 프로젝트를 생성할 때 CSS 사전 프로세서를 다음과 같이 지정합니다.

• SCSS 구문 사용

        ng new sassy-project --style=scss
  

• SAS 구문 사용

        ng new sassy-project --style=sass
  

기존 프로젝트 업데이트 중

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

• SCSS 구문 사용

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

• SAS 구문 사용

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

  위의 명령은 다음을 사용하여 작업영역 파일(angular.json)을 업데이트합니다.

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

styleext둘 중 하나일 수 있습니다.scss또는sass선택한 대로

여기서 Github repo 관계자의 말을 인용했습니다.

예를 들어 하나의 설치만 사용하는 방법

npm install node-sass

프로젝트의 .scs 또는 .vmdk 파일 이름을 .scs 또는 .vmdk로 변경합니다.자동으로 컴파일됩니다.Angular2App의 옵션 인수에는 sassCompiler, lessCompiler, stylusCompiler 및 compassCompiler 옵션이 있으며 각 CSS 프리프로세서에 직접 전달됩니다.

여기 참조

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

angular-cli에 기본적으로 항상 scss를 사용하도록 지시

지나가는 것을 피하기 위해--style scss프로젝트를 생성할 때마다 다음 명령을 사용하여 Angular-cli의 기본 구성을 전체적으로 조정할 수 있습니다.

ng set --global defaults.styleExt scss

angular-cli의 일부 버전에는 위의 글로벌 플래그를 읽는 버그가 포함되어 있습니다(링크 참조).버전에 이 버그가 포함된 경우 다음을 사용하여 프로젝트를 생성합니다.

ng new some_project_name --style=scss

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'](가추)./)에서.app.component.ts

새 프로젝트를 생성할 때 수행되는 ng는 기본 프로젝트가 생성될 때 수행되지 않습니다.빌드하는 동안 오류를 해결할 수 있는 경우 이 문제를 확인하십시오.1시간 밖에 안 걸렸어요.

것은 선은일 수 .ng new myApp --style=scss

그러면 Angular CLI가 Scss를 사용하여 새 구성 요소를 생성합니다.

로 참: 사를 사용합니다.scss아마 아시겠지만 브라우저에서 작동하지 않습니다.그래서 우리는 그것을 컴파일할 무언가가 필요합니다.css이러한 이유로 우리는 사용할 수 있습니다.node-sass아래와 같이 설치합니다.

npm install node-sass --save-dev

그리고 당신은 가도 좋습니다!

웹 팩을 사용하는 경우 여기를 읽어 보십시오.

기존 패키지가 있는 프로젝트 폴더 내부의 명령줄입니다.json은 다음과 같습니다.npm install node-sass sass-loader raw-loader --save-dev

webpack.common.js"comma:"를 검색하고 이 개체를 규칙 배열의 끝에 추가합니다(이전 개체의 끝에 쉼표를 추가하는 것을 잊지 마십시오).

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

그러면 구성 요소에서 다음 작업을 수행합니다.

@Component({
  styleUrls: ['./filename.scss'],
})

글로벌 CSS 지원을 원하는 경우 최상위 구성 요소(app.component.ts일 가능성이 있음)에서 캡슐화를 제거하고 SCSS를 포함합니다.

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

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

여기 앵귤러 스타터에서.

ng set --global defaults.styleExt=scssng6 이후로 더 이상 사용되지 않습니다.다음 메시지가 표시됩니다.

get/set가 config 명령보다 더 이상 사용되지 않습니다.

다음을 사용해야 합니다.

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

특정 프로젝트를 대상으로 지정하려는 경우({project}을(를) 프로젝트 이름으로 대체):

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

Angular 9.0 이상의 경우 업데이트"schematics":{}angular.json 파일의 객체는 다음과 같습니다.

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

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},

Angular-CLI는 권장되는 방법이며 Angular 2+ 커뮤니티의 표준입니다.

SCSS로 새 프로젝트 작성

ng new My-New-Project --style=sass

기존 프로젝트 변환(CLI가 v6보다 작음)

ng set defaults.styleExt scss

(이 접근 방식을 사용하여 모든 .vmx 파일의 이름을 수동으로 변경해야 합니다. 구성 요소 파일의 이름을 변경하는 것을 잊지 마십시오.)

기존 프로젝트 변환(CLI가 v6보다 큼)

1. 모든 CSS 파일의 이름을 SCSS로 바꾸고 이를 참조하는 구성 요소를 업데이트합니다.
2. angular.json(일반적으로 11행)의 "스키매틱스" 키에 다음을 추가합니다.

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

2019년 3월 10일부로 Anguar는 sass의 지원을 중단했습니다.어떤 옵션에 전달했든 간에--style을 할 때ng new당신은 항상 얻습니다..scss생성된 파일입니다.아무런 설명도 없이 sass 지원이 중단된 것은 유감입니다.

다음은 각진 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로 변경하고 구성 요소 등의 참조를 업데이트해야 하지만, 이동할 수 있습니다.

글로벌 기본값으로 설정

ng set defaults.styleExt=scss --global

Angular 12 업데이트 Angular.json의 경우:

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

그리고:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

TL;DR

빠른 노트:Angular 9 이상에서는styleext이 이이로변됨경름됨으로 변경됨style

9 & 앵귤러 9 & 9+
프로젝트를 : 새프젝를만동안는드:
ng new my-proj --style=scss

: 기의경우존:
ng schematics.@schematics/angular:component.style scss

- 8각 2 - 각 8의 경우
프로젝트의 :
ng config schematics.@schematics/angular:component.styleext scss

상세답변

각도 9 & 9+ :

각도 CLI를 통해

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

직으로적에 직접 .angular.json:

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

이전 버전의 경우

Angular CLI를 통해:

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

직으로적에 직접 .angular.json:

참고: 조회angular-cli.json6 이전 .6 & 의 경우 이 전버 6 및 6 + 의경파이일다변다니경습었으로 되었습니다.angular.json

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

참고: 원본 SO 답변은 여기에서 확인할 수 있습니다.

CSS 프리프로세서 통합 Angular CLI는 모든 주요 CSS 프리프로세서를 지원합니다.

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

@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

참고: @schematics/angular는 Angular CLI의 기본 스키마입니다.

CLI는 인라인 스타일에 사전 설정을 적용할 수 없으므로 the @Component.st yles 배열에 추가된 스타일 문자열은 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의 도구를 쉽게 노출하려면 angular.json에 stylePreprocessorOptions를 추가합니다.

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

BULMA + 각도 6

SAS 또는 앵귤러의 내장형 CSS 시스템을 사용하지 마십시오!!

아무리 강조해도 지나치지 않습니다.Angular의 사람들은 기본적인 계단식 스타일 시트 시스템을 이해하지 못했습니다. 이 두 가지 기술을 모두 사용할 때와 마찬가지로 말입니다.json 설정 - 컴파일러는 모든 CSS를 Javascript 모듈에 채운 다음 캐스케이드 순서를 중단하고 혼동하며 네이티브 CSS 가져오기 캐스케이드를 비활성화하는 내장 CSS로 HTML 페이지 머리에 뱉습니다.

따라서 "각형"에서 모든 스타일 참조를 제거하는 것이 좋습니다.JSON"을 선택한 후 다음과 같은 링크로 수동으로 "index.html"에 다시 추가합니다.

<link href="styles/styles.css" rel="stylesheet" />

이제 ECMA 스크립트로 작성된 서커스 트릭 없이 여러 번의 새로 고침을 통해 브라우저에 완전히 캐시되는 완전한 기능을 갖춘 계단식 CSS 시스템을 갖추게 되었습니다. 따라서 대역폭을 크게 절약하고 정적 파일에서 CSS 전체 관리를 향상할 수 있습니다.그리고 당신의 캐스케이드 순서에 대한 완전한 통제에서 앵귤러가 시도하는 모든 웹 페이지의 머리에 주입된 투박한 임베디드 CSS를 뺀 것.

기본 CSS 파일에서 캐스케이드를 관리하는 방법을 이해하는 경우에도 SASS는 필요하지 않습니다.복잡한 CSS가 있는 대규모 사이트는 소수의 연결된 CSS 파일을 사용하여 캐스케이드 순서를 학습하는 데 어려움을 겪는 사람들에게 관리가 매우 간단할 수 있습니다.

언급URL : https://stackoverflow.com/questions/36220256/angular-cli-sass-options