Заменить node-sass компилятором SASS, не зависящим от платформы, в проекте React

Мы - команда из примерно 6 разработчиков с разнородными настройками (Windows 10, Ubuntu, macOS), которые начали разработку с React.

Создание сценариев между Linux / macOS и Windows было проблемой, поэтому мы решили использовать Bash для Windows для запуска наших сборок. Это работает довольно хорошо, если вы правильно настроили Bash, а интеграция с VS Code отличная. Но есть большая загвоздка: всякий раз, когда вы хотите обновить свой проект вне Bash (с помощью CMD или PowerShell), вы эффективно переключаете свою ОС, а затем получаете красивую ошибку из узла -sass сообщает, что ваша среда изменилась .

Поскольку перестройка node-sass просто никогда не работает, единственный способ, который мы нашли, чтобы избавиться от этой проблемы, - это удалить или переименовать node_modules и снова запустить npm install, но это требует очень много времени / ресурсов.

Мы видели, что, похоже, существует собственная альтернатива js, но мы хотели бы посмотрите, есть ли кто-нибудь, кто испытал то же самое и нашел подходящее решение.

У нас действительно нет массивных файлов SASS, поэтому нас не особо заботит производительность (что является основным моментом в C ++ с libSass).

Примечание. Мы не всегда можем использовать Bash в Windows, потому что у нас есть некоторая беспорядочная интеграция Maven в некоторые приложения Java / React, которые запускают сборки npm, и это всегда будет в Windows.


person LeoLozes    schedule 12.07.2017    source источник
comment
Просто чтобы поделиться нашим решением: мы начали использовать Material-UI и отказались от SASS (не нужен для нескольких строк CSS, которые у нас есть после использования библиотеки).   -  person LeoLozes    schedule 23.11.2017


Ответы (2)


Мы использовали интерфейс Angular 6 в нашем приложении и столкнулись с той же проблемой. Мы решили эту проблему, проверив необходимые двоичные файлы в репозиторий и использовали разные профили Maven (по одному для каждой среды / ОС, по умолчанию - linux для нашего CI), чтобы установить путь sass-binary-path к его двоичному файлу, зависящему от среды. Однако это работает только в том случае, если у вас есть система сборки, способная устанавливать переменные среды. Еще одно предостережение: вам придется вручную обновлять свои двоичные файлы.

<properties>
    <sass.binary.path.base>${basedir}/node-sass-binaries/</sass.binary.path.base>
</properties>
...
<profile>
  <id>linux</id>
  <activation>
    <activeByDefault>true</activeByDefault>
  </activation>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/linux-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>
<profile>
  <id>windows</id>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/win32-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>
<profile>
  <id>mac</id>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/darwin-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>
person dnl.re    schedule 29.10.2018
comment
Отлично, я об этом не подумал! Я просто не отмечаю, что это решено, потому что для меня решением было бы иметь, возможно, менее оптимизированный, но мне все равно компилятор, который работал бы на каждой ОС. Но пока это действенное решение. - person LeoLozes; 29.10.2018

Один из вариантов - использовать некоторые плагины PostCSS: PreCSS и postcss-preset-env. Есть хорошая краткая статья здесь для перехода.

Я сам этого не делал; но исследую, чтобы сделать это для большого проекта. Я видел несколько проектов с нотацией SASS, а затем заметил, что они использовали только плагины PostCSS +, избегая беспорядка node-sass. Просто передаю информацию.

person tomByrer    schedule 27.02.2019
comment
Спасибо за информацию! Мы закончили тем, что использовали JSS (cssinjs.org), потому что мы используем material-ui, и он работает довольно хорошо: ) - person LeoLozes; 28.02.2019