[angular] 각도 CLI SASS 옵션

Program / 글쓴이

저는 Angular를 처음 사용하고 있으며 Ember 커뮤니티에서 왔습니다. Ember-CLI 기반의 새로운 Angular-CLI를 사용하려고합니다.

새 Angular 프로젝트에서 SASS를 처리하는 가장 좋은 방법을 알아야합니다. ember-cli-sassAngular-CLI의 많은 핵심 구성 요소가 Ember-CLI 모듈에서 부족하기 때문에 repo를 사용하여 작동 하는지 확인했습니다.

작동하지 않았지만 무언가를 잘못 구성했는지 확실하지 않습니다.

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

답변

Angular CLI 버전 9 (Angular 9 프로젝트를 만드는 데 사용)가 이제 style대신 회로도에서 선택됩니다 styleext. 다음과 같은 명령을 사용하십시오.
ng config schematics.@schematics/angular:component.style scss
결과 angular.json은 다음과 같습니다.

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

다른 가능한 솔루션 및 설명 : sass를 지원 하는 각도 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 이상 업데이트

  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선택에 따라 될 수 있습니다 .

원래 답변 (각도 <6)

새로운 프로젝트

새로운 프로젝트를 위해 우리는 옵션을 설정할 수 있습니다 --style=sass또는 --style=scss원하는 맛 SASS / SCSS에 따라

  • SASS 구문 사용

    ng new project --style=sass

  • SCSS 구문 사용

    ng new project --style=scss

다음 설치 node-sass,

npm install node-sass --save-dev

기존 프로젝트 업데이트

로 angular-clisass 파일을 컴파일 하려면 다음 node-sass을 실행해야했습니다.

npm install node-sass --save-dev

어느 설치합니다 node-sass. 그때

  • SASS 구문

    ng set defaults.styleExt sass

  • SCSS 구문

    ng set defaults.styleExt scss

기본 styleExt를 sass로 설정하려면

(또는)

styleExt에서 sass또는 scss원하는 구문으로 변경하십시오 .angular-cli.json.

  • 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"
      ],

답변

공무원 github repo에서 인용-여기

예를 들어 하나만 설치하려면

npm install node-sass

프로젝트의 .css 파일 이름을 .scss 또는 .sass로 바꿉니다. 자동으로 컴파일됩니다. Angular2App의 options 인수에는 sassCompiler, lessCompiler, stylusCompiler 및 compassCompiler 옵션이 있으며 해당 CSS 전처리기에 직접 전달됩니다.

여기를 보아라

답변

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

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

ng set --global defaults.styleExt scss

angular-cli의 일부 버전에는 위의 글로벌 플래그를 읽는 버그가 포함되어 있습니다 ( link 참조 ). 버전에이 버그가 포함되어 있으면 다음을 사용하여 프로젝트를 생성하십시오.

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

그리고 당신은 잘 가야합니다!

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

기존 package.json이있는 프로젝트 폴더 내의 명령 행 : npm install node-sass sass-loader raw-loader --save-dev

에서 webpack.common.js“rules :”를 검색하고이 객체를 규칙 배열의 끝에 추가하십시오 (이전 객체의 끝에 쉼표를 추가하는 것을 잊지 마십시오).

{
  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 {}

Angular 스타터 에서 여기 .