CLI (v3.7.0)를 사용하여 새 프로젝트를 만들 때 dart-sass
또는 다음 중에서 선택할 수있는 옵션이 있습니다.node-sass
컴파일러 .
Vue 문서 에서 선언 한 것보다 더 구체적으로 어떻게 비교 합니까?
Sass 성능에 대한 팁
Dart Sass를 사용할 때 비동기식 콜백의 오버 헤드로 인해 동기식 컴파일이 기본적으로 비동기식 컴파일보다 두 배 빠릅니다. 이 오버 헤드를 방지하기 위해 fiber 패키지를 사용하여 동기 코드 경로에서 비동기 임포터를 호출 할 수 있습니다. 이를 활성화하려면 Fiber를 프로젝트 종속성으로 설치하기 만하면됩니다.
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
더 성능이 좋은 선택이 여기에 확립되어 있으며 거의 아무도 다트를 사용하지 않습니다. 않습니다 (ccleve의 의견).
편집 2020/09 : 알리 Bahrami 그의 광범위한 대답을 업데이트, dart-sass
선호하는 선택 으로 node-sass
되지 않는 것으로 표시되고있다 .
너무 나쁜 dart-sass
것은 JS 컴파일 버전이 성능이 좋지 않다는 것입니다. 그러나 개발자는이를 잘 알고 있으며이 문제에 명시된대로 더 나은 성능을 위해 노력하고 있습니다 .
답변
업데이트 09/17/2020 :
이 답변은 매일 찬성 투표를 받으므로이 주제에 대해 더 깊이 파고 드는 것이 가치가 있다고 생각했습니다.
sass-lang 웹 사이트 고려 :
Dart Sass는 Sass의 주요 구현으로, 다른 구현보다 먼저 새로운 기능을 얻습니다. 빠르고 설치가 쉬우 며 순수한 JavaScript로 컴파일 되어 최신 웹 개발 워크 플로에 쉽게 통합 할 수 있습니다.
Dart-Sass는 빠르지 만 JS 컴파일 버전 은 아닙니다 . 실제로 Dart-Sass를 말할 때 두 가지 옵션이 있습니다.
- Dart-VM의 Dart-Sass
- 순수 JS 컴파일 버전 인 NPM의 Dart-Sass
Node-Sass, Dart-Sass 및 Dart-Sass (JS)를 사용하여 Bootstrap 4 Sass 파일을 CSS로 컴파일했으며 다음 결과를 볼 수 있습니다.
- 이 특별한 경우에 2 초는 큰 문제가 아닙니다. 그러나 Dart-Sass (JS)는 Dart-Sass (Dart VM)보다 9 배 느리고 node-sass보다 3 배 느립니다.
- +20 개의 테마로 프로젝트를 진행했는데 node-sass로 30 초가 걸렸지 만 Dart-Sass (JS)를 사용하려고했는데 한 세기가 걸렸습니다!
- Dart-Sass (Dart VM)가 가장 빠르지 만 설치 또는 통합이 약간 까다 롭습니다.
- 그리고 Node-Sass 는 더 이상 사용되지 않는 것으로 간주됩니다 .
나는 블로그 당신이 여기에 대한 자세한 내용을보실 수 있습니다, 여기에 대해.
답변
node-sass는 dart-sass보다 빠를 수 있지만,이 dart-sass는이 @use
규칙 을 구현하는 유일한 라이브러리이며 @import
. 공식 sass-lang 웹 사이트 에 따르면 :
무엇이 문제입니까
@import
? 이@import
규칙에는 여러 가지 심각한 문제가 있습니다.
@import
모든 변수, 믹스 인 및 함수를 전역 적으로 액세스 할 수 있습니다. 이로 인해 사람 (또는 도구)이 정의 된 위치를 알기가 매우 어렵습니다.모든 것이 글로벌이기 때문에 라이브러리는 이름 충돌을 피하기 위해 모든 멤버 앞에 접두사를 붙여야합니다.
@extend
규칙도 전역 적이므로 확장 될 스타일 규칙을 예측하기 어렵습니다.각 스타일 시트가 실행되고 CSS가
@import
편집 될 때마다 방출 되므로 컴파일 시간이 늘어나고 출력이 부풀어집니다.다운 스트림 스타일 시트에 액세스 할 수없는 개인 멤버 또는 플레이스 홀더 선택기를 정의 할 방법이 없었습니다.
새로운 모듈 시스템과
@use
규칙은 이러한 모든 문제를 해결합니다.
또한, @import
됩니다 점차 단계적으로 향후 몇 년 동안, 결국 완전히 언어에서 제거.
Sass의 모범 사례를 최신 상태로 유지하려면 지금은 dart-sass (예 : sass )를 사용해야합니다 .