Vue CLI CSS 사전 프로세서 옵션: dart-sass VS node-ass?

Vue CLI CSS 사전 프로세서 옵션: dart-sass VS node-ass?

CLI(v3.7.0)로 새 프로젝트를 생성할 때 다음 중 하나를 선택할 수 있는 옵션이 있음dart-sass또는node-sass컴파일러

Vue 문서로 선언된 것보다 더 구체적으로, 이 두 문서들은 서로 어떻게 비교되는가?

Sass 성능에 대한 팁

Dart Sass를 사용할 경우 비동기 콜백의 오버헤드 때문에 동기식 컴파일이 기본적으로 비동기식 컴파일보다 2배 더 빠르다는 점에 유의하십시오.이러한 오버헤드를 방지하려면 섬유 패키지를 사용하여 동기식 코드 경로에서 비동기식 가져오기 기능을 호출하십시오.이렇게 하려면 프로젝트 종속성으로 섬유를 설치하십시오.

npm install -D fibers

또한 기본 모듈인 만큼 OS와 빌드 환경에 따라 호환성 문제가 발생할 수 있다는 점에 유의하십시오.그런 경우에는 도망가십시오.npm uninstall -D fibers문제를 해결하기 위해

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

2020/01 편집: Vue CLI 4.2.2 새 프로젝트 생성 제안dart-sass이전의 첫 번째 선택으로node-sass. 그러나 여기서 다음과 같은 것이 확립되었다.node-sass더 나은 선택이고 거의 아무도 다트-사스를 사용하지 않는다.

EDIT 2020/09: 알리 바흐라마이가 광범위한 답변을 업데이트함에 따라, 더 이상 사용되지 않는 것으로 표시된 선호하는 선택이다.

아쉽다dart-sassJS 컴파일 버전의 성능이 좋지 않아그러나 개발자들은 이를 잘 알고 있으며 이번 호에서 언급된 바와 같이 더 큰 성능을 위해 노력하고 있다.

09/17/2020 업데이트:

이 답이 매일 떠오르면서, 나는 이 주제에 대해 더 깊이 생각해 볼 가치가 있다고 생각했다.

---

sass-lang 웹 사이트 고려:

다트 사스는 사스의 일차적인 구현으로, 다른 구현보다 먼저 새로운 기능을 얻게 된다는 것을 의미한다.빠르고 쉽게 설치할 수 있으며, 순수한 자바스크립트로 컴파일하여 현대적인 웹 개발 워크플로우에 쉽게 통합할 수 있다.

다트-사스는 빠르지만 JS가 편찬한 버전은 아니다.실제로 우리가 다트-사스라고 말할 때 두 가지 옵션이 있다.

• Dart-VM의 Dart-Sass
• 순수 JS 컴파일 버전인 NPM의 다트-사스

Node-Sass, Dart-Sass 및 Dart-Sass(JS)와 함께 CSS에 Bootstrap 4 Sass 파일을 컴파일했는데 다음과 같은 결과를 볼 수 있다.

• 이 경우 2초는 큰 문제가 되지 않지만 다트-사스(JS)가 다트-사스(다트 VM)보다 9배, 노드-사스보다 3배 느리다는 점을 고려한다.
• 나는 +20 테마를 가진 프로젝트를 가지고 있었는데, 노드-사스로 30초가 걸렸지만, 다트-사스(JS)를 사용하려고 했고, 1세기가 걸렸다!
• 다트-사스(Dart VM)가 가장 빠르지만 설치나 통합이 좀 까다롭다.
• 그리고 노드-사스는 더 이상 사용되지 않는 것으로 간주된다.

내가 블로그에 올렸는데, 여기서 더 읽어봐.

24/01/2021

공식 node-sass github 문서에 기록되었듯이 node-sass는 더 이상 사용되지 않는다.

경고: LibSass 및 Node Sass는 더 이상 사용되지 않는다.유지 관리 릴리즈는 계속 무기한으로 제공되지만, 새로운 CSS 또는 Sass 기능과의 호환성을 추가하거나 추가하려는 계획은 없다.아직도 그것을 사용하고 있는 프로젝트들은 다트 사스로 옮겨져야 한다.

그래서 나는 네가 장기 계획을 세우거나 최신 상태를 유지하는 것이 더 낫다고 생각해.

node-sass가 dart-sass보다 더 빠를 수 있지만, 이 dart-sass를 쓰는 것은 이 dart-sass를 구현하는 유일한 도서관이다.@use에 대해 강력히 권고하는 규칙@import공식 sass-lang 웹사이트에 따르면:

왜 그래?@import더@import규칙에는 여러 가지 심각한 문제가 있다.

• @import모든 변수, 혼합물 및 함수를 전체적으로 액세스할 수 있도록 한다.이것은 사람들로 하여금 어떤 것이 정의되는지를 구별하는 것을 매우 어렵게 만든다.

• 모든 것이 전세계적이기 때문에 도서관은 이름 충돌을 피하기 위해 모든 구성원에게 접두사를 붙여야 한다.

• @extend규칙도 글로벌하기 때문에 어떤 스타일의 규칙이 확장될지 예측하기 어렵다.

• 각 스타일시트가 실행되어 매번 CSS가 방출됨@import편집 시간을 늘리고 생산량이 비대해지는 ed.

• 다운스트림 스타일시트가 접근할 수 없는 개인 멤버나 자리 표시자 선택기를 정의할 방법이 없었다.

새 모듈 시스템 및@use규칙은 이 모든 문제를 해결한다.

또한.@import향후 몇 년 동안 단계적으로 폐지될 것이며, 결국 언어에서 완전히 제거될 것이다.

Sass의 베스트 프랙티스를 최신 상태로 유지하기 위해서는 일단 다트-사스(즉, sass)를 사용해야 한다.

참조URL: https://stackoverflow.com/questions/56150402/vue-cli-css-pre-processor-option-dart-sass-vs-node-sass