Опція попереднього процесора Vue CLI CSS: dart-sass VS node-sass?

При створенні нового проекту з CLI (v3.7.0), є можливість вибрати між dart-sassабо node-sassкомпілятором.

Як вони порівнюються між собою, щоб бути більш конкретними, ніж заявлено в документах Vue ?

Порада щодо продуктивності Sass

Зверніть увагу, що при використанні Dart Sass синхронна компіляція вдвічі швидша за асинхронну компіляцію за замовчуванням через накладні витрати на асинхронні зворотні виклики. Щоб уникнути цих накладних витрат, ви можете використовувати пакет fiber для виклику асинхронних імпортерів із шляху синхронного коду. Щоб увімкнути це, просто встановіть волокна як залежність від проекту:

npm install -D fibers

Також майте на увазі, оскільки це рідний модуль, можуть виникати проблеми з сумісністю в ОС та середовищі побудови. У такому випадку запустіть, 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

EDIT 2020/01: Vue CLI 4.2.2 створити новий проект все ще пропонується dart-sassяк перший варіант раніше node-sass. Проте тут було встановлено, що node-sassце найефективніший вибір, і майже ніхто не використовує dart- sass (коментар ccleve).

EDIT 2020/09: Як Алі Bahrami оновив свій відповідаю розгорнуто, dart-sassє кращим вибором , як node-sassв даний час відзначений як застарілий .

Шкода, що dart-sassкомпільована JS версія має низьку продуктивність. Однак розробники це добре знають і працюють над підвищенням продуктивності, як зазначено у цьому випуску .

Оновлення 17.09.2020 :

Оскільки ця відповідь щодня набирає голосів, я подумав, можливо, варто заглибитися глибше в цю тему.

Розглядаючи веб-сайт sass-lang :

Dart Sass - це основна реалізація Sass, що означає, що вона отримує нові функції перед будь-якою іншою реалізацією. Це швидко, легко встановлюється і компілюється на чистий JavaScript, що полегшує інтеграцію в сучасні робочі процеси веб-розробки.

Dart-Sass швидко працює, але не компільована версія JS . Практично, коли ми говоримо Дарт-Сасс, є два варіанти:

• Dart-Sass на Dart-VM
• Dart-Sass на NPM, що є чистою компільованою версією JS

Я скомпілював файл Bootstrap 4 Sass у CSS за допомогою Node-Sass, Dart-Sass та Dart-Sass (JS), і ви можете побачити такий результат:

• У цьому конкретному випадку дві секунди - це не велика проблема; але врахуйте, що Дарт-Сасс (JS) в дев'ять разів повільніший за Дарт-Сасс (Дарт ВМ) і втричі повільніший за Вузол-Сасс.
• У мене був проект з +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 ).