когда компилировать SASS

Question

Я новичок в веб-разработке. Я читал о SCSS / SASS и понял, что это не то, что ищет браузер, поэтому он должен быть скомпилирован в чистый CSS. Мой вопрос: правильно ли я понял:

• всякий раз, когда я изменяю свой файл SCSS, я должен скомпилировать его и посмотреть результат.

• всякий раз, когда я хочу обновить свой веб-сайт, у меня должен быть специальный скрипт на моей стороне сервера, чтобы переводить новые файлы SCSS в чистый CSS, и это происходит только один раз за обновление. (Количество CSS-файлов велико, и я хочу оставить только SCSS в моем хранилище).

Буду признателен, если у вас есть дополнительная информация.

TNX много

Answer 1

Для компиляции SCSS в CSS мы используем такие исполнители задач, как Gulp , Webpack и т. Д. Я объясню, как Глоток является примером.

Что такое глоток?

Gulp - это средство запуска задач, используемое в качестве системы потоковой сборки в процессе разработки веб-интерфейса. В основном используется автоматизация трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация, конкатенация, компиляция, модульное тестирование, линтинг, оптимизация и т. Д.

Вы можете использовать Gulp для компиляции вашего SCSS кода CSS и через gulp вы также можете следить за изменениями в реальном времени.

Для установки Gulp в вашей системе должна быть установлена ​​ Node Js . После этого используйте npm i gulp-cli -g для установки шагов gulpFurtherer, вы можете увидеть его на официальном сайте

Чтобы настроить SCSS для компиляции на CSS , это лучшая статья, которую вы можете найти для начала работы с Gulp для компиляции SCSS и других задач. Глоток для начинающих

Answer 2

Я буду использовать Laravel в качестве примера.

Laravel поставляется с Laravel Mix , который позволяет вам компилировать SCSS, LESS и т. Д. В CSS с помощью внутреннего веб-пакета. (он также работает с JS)

Laravel поставляется с папкой resources / assets / sass по умолчанию, и именно здесь вы помещаете свои файлы scss / sass.

Затем он компилирует эти файлы и помещает их в вашу папку public / css при каждом запуске npm run dev. Вы также можете использовать npm run watch для компиляции этих файлов всякий раз, когда вы вносите изменения и сохраняете файлы scss.

Также имеется команда npm run prod, которая компилирует файлы в минимизированном формате, что делает файлы светлее.

Если вы пишете все свои css с помощью SCSS, вам даже не нужно помещать папку public / css в ваш репозиторий git.

Всякий раз, когда вы вносите изменения в git и хотите обновить их на сервере, просто обновите репозиторий сервера и выполните имеющуюся команду компиляции.

Если вы не используете git для отправки изменений на сервер, вы можете просто скомпилировать CSS-файлы, используя npm run prod, и отправить эти файлы на сервер через FTP или любым другим способом.