저는 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 전처리기에 직접 전달됩니다.

여기를 보아라

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

기본적으로 항상 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 스타터 에서 여기 .

ng set --global defaults.styleExt=scssng6부터는 더 이상 사용되지 않습니다. 이 메시지가 나타납니다.

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

다음을 사용해야합니다.

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

특정 프로젝트를 타겟팅하려는 경우 (프로젝트 이름으로 {project}를 대체) :

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

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

SCSS로 새 프로젝트를 작성하십시오

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

기존 프로젝트 변환 (v6 미만의 CLI)

ng set defaults.styleExt scss

(이 방법으로 모든 .css 파일의 이름을 수동으로 바꾸어야합니다. 구성 요소 파일의 이름을 바꾸는 것을 잊지 마십시오)

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

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

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

들어 각도 9.0 이상 업데이트 "schematics":{}에서 객체 angular.json의 이 같은 파일을 :

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

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

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

npm install node-sass --save-dev

그런 다음 ( 프로젝트 이름을 변경하십시오 )

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

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

ng config defaultProject

그러나 프로젝트를 <6에서 각도 6으로 마이그레이션 한 경우 구성이 없을 가능성이 높습니다. 어떤 경우에는 다음을 얻을 수 있습니다.

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

따라서 수동 편집 angular.json이 필요합니다.

다음과 같이 보이길 원할 것입니다 (styleex 속성에 주목).

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

너무 복잡한 스키마처럼 보입니다. ¯_ (ツ) _ / ¯

이제 모든 CSS / less 파일을 scss로 변경하고 구성 요소 등의 모든 참조를 업데이트해야하지만 계속 진행해야합니다.

Anguar는 2019 년 3 월 10 일자로 sass 지원을 중단했습니다. --style실행할 때 어떤 옵션을 전달했는지 상관없이 ng new항상 .scss파일을 생성합니다. 아무 설명없이 Sass 지원이 중단 된 것은 부끄러운 일입니다.

전역 기본값으로 설정

ng set defaults.styleExt=scss --global

CSS 전 처리기 통합 Angular 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

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

CLI가 인라인 스타일에 사전 처리기를 적용 할 수 없으므로 @ Component.styles 배열에 추가 된 스타일 문자열은 CSS로 작성해야합니다.

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

이 명령을 사용하여 sass를 사용하도록 프로젝트를 업데이트하려고했습니다.

ng 기본값 설정. 스타일 확장 scss

그러나 이것을 얻었다

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

• 앵귤러 CLI : 6.0.7
• 노드 : 8.9.0
• 운영체제 : linux x64
• 각도 : 6.0.3

그래서 프로젝트를 삭제하고 (프로젝트에 코드가 없었기 때문에) sass가 처음 설정된 새 프로젝트를 만들었습니다.

새로운 my-sassy-app --style = scss

그러나 누군가 기존 프로젝트를 업데이트하는 방법을 공유 할 수 있다면 좋을 것입니다.

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"
 ]
},
...

불가리아 + 앵글 러 6