[angular] 각도 CLI SASS 옵션
저는 Angular를 처음 사용하고 있으며 Ember 커뮤니티에서 왔습니다. Ember-CLI 기반의 새로운 Angular-CLI를 사용하려고합니다.
새 Angular 프로젝트에서 SASS를 처리하는 가장 좋은 방법을 알아야합니다. ember-cli-sass
Angular-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 이상 업데이트
-
새로운 프로젝트
Angular CLI를 사용하여 새 프로젝트 를 생성 할 때 CSS 전처리기를 다음과 같이 지정하십시오.
-
SCSS 구문 사용
ng new sassy-project --style=scss
-
SASS 구문 사용
ng new sassy-project --style=sass
-
-
기존 프로젝트 업데이트
실행 하여 기존 프로젝트에서 기본 스타일 설정
-
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-cli
sass 파일을 컴파일 하려면 다음 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
자세한 내용은 다음 설명서를 참조하십시오.
답변
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 스타터 에서 여기 .