Angular CLI가 적은 파일을 컴파일하는 것을 방지합니다.

적은 변수를 사용하여 내 사이트에 동적 테마를 적용하려고합니다. 여기에 간단한 시나리오입니다 :Angular CLI가 적은 파일을 컴파일하는 것을 방지합니다.

파일 : site.less

@primary-color: 'red'

파일 : foobar.component.less

@import '../site.less'; 
.some-element { 
    background-color: @primary-color; 
}

이 초기 페이지로드를 위해 잘 작동하고, 배경 색상이 빨간색 . 하지만 이제는 여러 색상 옵션을 가진 드롭 다운 색상 선택기가 필요합니다. 사용자가 빨간색 대신 녹색을 선택하면 덜 기능인 less.modifyVars({'@primary-color', 'green'})을 사용하고 싶기 때문에 아무런 변화가 없습니다. 왜냐하면 angular cli가 less를 css로 미리 컴파일하기 때문에 브라우저가 적은 파일을 처음부터 보지 못하기 때문입니다.

그래서 Angular가 CSS로 적은 파일을 컴파일하지 않는다면 브라우저는 modifyVars가 호출 될 때 변경 사항을 고려할 것입니다.

각도를 CSS로 컴파일하지 않는 방법은 무엇입니까?

출처

2017-12-12 heilch

아마도 cli의 [eject] (https://github.com/angular/angular-cli/wiki/eject) 명령을 사용하고 less를 컴파일하지 않도록 webpack을 구성해야합니다. – LLai

그 명령에 대해 완전히 익숙하지 않은데, 이것은 Angular CLI를 빌드에 더 이상 사용하지 않고 원시 webpack을 사용하겠습니까? – heilch

정확하다. 빌드를 완전히 제어 할 수있다. – LLai

각도 cli의 ng eject 명령을 사용할 수 있습니다. 그러면 빌드 명령 작성 방법을 완전히 제어 할 수있는 webpack 구성 파일이 나옵니다.

사이드 노트 : 나는 ng eject을 되돌릴 수는 없다고 생각하지 않지만, 항상 쉬운 과정이 아니라고 읽었습니다. 특히 여러 버전이 각진 cli 팀과 합류하여 빌드 명령에 기능을 추가/수정합니다.

출처

2017-12-12 23:06:01 LLai

브라우저에서 컴파일하지 말라는 언급을 여러 소스에서 보았으므로 다른 접근 방식을 취하기로했습니다. 그러나이 질문의 측면에서 이것은 정답입니다. – heilch

@heilch 예, 나는 확실히 다른 접근법을 추천합니다. 이것은 빌드 프로세스의 잡초에 들어갑니다. – LLai

적은 파일에서 변수 이름을 변경하지 않는 이유는 무엇입니까?

출처

2017-12-12 22:28:16

CLI가 브라우저에 도달하기 전에 서버에서 less를 컴파일합니다. 그것은 변수의 모든 인스턴스를 브라우저에 제공되는 css의 16 진수 값으로 직접 바꿉니다. 브라우저의 관점에서 이름을 바꿀 변수가 없었습니다 – heilch

어떤 방법으로 사이트에 연결할 수 있습니까? 앵귤러와 연결할 필요가 없습니까? –

.angular-cli.json 파일에는 "styles"에 대한 구성 배열이 있습니다. 거기에 적은 파일을 포함 시켰습니다. 구성 요소가 적은 파일은 컴파일 중에 컴파일 할 수 있습니다. – heilch

Angular CLI가 적은 파일을 컴파일하는 것을 방지합니다.

답변

관련 문제