Вам нужно развернуть SASS в производстве?

Question

Нужно ли включать файл SASS в производство? Разве мы не можем просто развернуть скомпилированный вывод CSS? Как вы, ребята, внедрили свой код CSS / SCSS в производство?

Если кто-то из вас не включает SCSS в производство, как вы справляетесь с контролем версий, таким как Git. Я предполагаю, что основная версия должна иметь файл SCSS, но вытаскивание из производственной среды должно быть исключено? Это проблематично?

Я просто хочу посмотреть, какой самый эффективный способ сделать это.

Причина, по которой я спросил об этом, заключается в том, что в последнее время, используя Chrome DevTools, я вижу файлы scss в качестве источника. Чтобы понять, что я имею в виду, если вы зайдете на getbootstrap.com и изучите его стили, вы увидите scss в качестве источника.

Answer 1

Это зависит от вашего процесса сборки. Если вы запускаете файлы Sass и компилируете их на веб-сервере при запуске развертывания, тогда да. Но у меня есть структура файла примерно так:

- src
--- styles
------ Sass files
--- js
--- images

- build
--- assets
------ styles
--------- CSS files
------ js
------ images

Итак, я помещаю все в git и, прежде чем развернуть изменения, я запускаю свои команды сборки * локально, затем помещаю все в Git.

Отсюда я размещаю все в каталоге /build на веб-сервере для моего сайта.

* Мои команды сборки являются моими обычными командами компиляции, за исключением того, что я минимизирую только при сборке.

Answer 2

Браузер не отображает или не понимает код SASS . Таким образом, обработка таких файлов не только не требуется, но и не работает¹.

¹ _{Ну, да, может работать - существует множество реализаций SASS, включая JavaScript , которые можно использовать в браузере.}

Код SASS, который вы видите в инструментах разработчика вашего браузера (не только в Chrome), является инструментом разработчика . Чтобы диагностировать проблемы с CSS, вы можете указать вашему компилятору SASS генерировать исходные карты . Исходная карта - это документ, который связывает позиции в ваших возможно уменьшенных файлах CSS с исходным кодом SASS, из которого он получен. Когда вы открываете инструменты разработчика и файл CSS объявляет исходную карту ( пример ):

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f[…]
/*# sourceMappingURL=bootstrap.min.css.map */

… браузер загружает карту ( пример ), которая в свою очередь связывает соответствующие файлы исходного кода SASS.

{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss"[…]

Вместе с информацией об отображении файла / строки / столбца инструменты разработчика могут реконструировать код SASS, из которого происходят заданные стили элементов.

"mappings":"AAAA;;;;;ACAA,MAGI,OAAA,QAAA,SAAA,QAAA,SAAA,QAAA,[…]

Исходные файлы явно не требуются. Включать их или нет, зависит от таких факторов, как:

1. Можно ли распространять их или они содержат материалы, которые должны оставаться конфиденциальными, например, внутренние комментарии или интеллектуальную собственность?

2. Вам нужно диагностировать материал на живом сайте?

Answer 3

Sass конвертируется в CSS, поэтому вам не нужно устанавливать его на сервер. Его нужно устанавливать только локально, браузер понимает только CSS, SAAS - это язык сценариев препроцессора, упрощающий организацию и редактирование кода без особых усилий.