Работа с Sass

В этой статье вы узнаете, как компилировать код Sass в CSS в DC CMS.

DC CMS не выполняет прямую компиляцию Sass в CSS, но вы можете использовать любой набор инструментов пользовательского интерфейса для компиляции в CSS.

Cледуйте этим шагам для компиляции кода Sass в CSS, а затем коммитните полученный файл CSS в git:

1. Создайте папку sources внутри директории изолированной среды (sandbox) вашего проекта (например, CMS_HOME/data/repos/site/PROJECT_NAME/sandbox/sources). Важно отметить, что следующие папки внутри sources, не связаны с blob-хранилищами и принадлежат разработчикам:

    • sources/*
    • static-assets/app/*

2. Внутри папки sources создайте инструментарий пользовательского интерфейса с помощью команды yarn init, затем добавьте Sass с помощью команды yarn add sass, после этого добавьте скрипт сборки в ваш package.json.

3. Убедитесь, что yarn build записывает скомпилированный вывод в sandbox/static-assets/css.

4. На своих веб-страницах включите импорт таблиц стилей, например <link src="/static-assets/css/style.css" rel="stylesheet" />. Рекомендуется оставить комментарий, указывающий, что файлы CSS скомпилированы и не должны редактироваться вручную. Предупредите других о том, что этот фрагмент нельзя изменить, так как его перезаписывает скрипт сборки.

5. Вы можете вносить изменения и, при необходимости, выполнять пересборку во время предварительного просмотра. Просто не забудьте добавлять и коммитить ваши скомпилированные выходные данные в репозитории, когда вы закончите со своими изменениями, например: 

git add static-assets/css/{Your css files}
git commit -m "{Add your comment here}"

Copy-icon

6. Повторяйте сборку и коммит каждый раз, когда создаете свой исходный код.

Связанные статьи

Документация для разработчиков