[Compiler] Компиляция SCSS файлов в бекенде
Пакет компилирует SCSS в CSS код при сохранении файла в бек-энде MODX.
Пока умеет работать только с SCSS файлами, но т.к. написан на основе Munee, то в будущем будет расширен до всех возможностей оной (кроме изображений).
Список настроек, связанных с SCSS:
- Папка для обработки SCSS файлов
Файлы из этой папки будут обработаны компонентом при сохранении.
- Папка для сохранения CSS
В эту папку будут сохранены скомпилированные CSS файлы.
- Компилировать файлы из подпапок?
Помимо файлов из основной директории, указанной в настройке «compiler_scss_dir_from», будут скомпилированы при сохранении и файлы, находящиеся в субдиректориях.
- Пропускать файлы, начинающиеся с прочерка?
Файлы, имена которых начинаются с прочерка "_" компилироваться не будут.
Скачать пакет в modStore.pro
19 августа 2016, 07:15
Поблагодарить автора
Отправить деньги
Комментарии: 58
MinifyX компилирует, а не проверяет… компилирует при загрузке страницы, когда сниппет вызывается… если сниппет закешен, то MinifyX тебе ничего не скомпилирует.
А тут как это сделать? Нет, вряд ли такое получится. Данный инструмент не претендует на замену MinifyX или замену IDE редактора. Это всего лишь пакет, который позволяет скомпилировать, пока только, SCSS при сохранении файла из бек-энда. Если надо компилировать вне админки — настрой проект в каком-нибудь Саблайме или Шторме и компилируй.
А тут как это сделать? Нет, вряд ли такое получится. Данный инструмент не претендует на замену MinifyX или замену IDE редактора. Это всего лишь пакет, который позволяет скомпилировать, пока только, SCSS при сохранении файла из бек-энда. Если надо компилировать вне админки — настрой проект в каком-нибудь Саблайме или Шторме и компилируй.
столкнулся с такой проблемой:
вот такой код
codepen.io/anon/pen/JKgRNd
вот такой код
%test-background{
background: rgba(0,0,0,0.1);
}
.div{
@extend %test-background;
&__div{
@extend %test-background;
}
}.div, __div.div {
background: rgba(0, 0, 0, 0.1);
}codepen.io/anon/pen/JKgRNd
.div, .div__div {
background: rgba(0, 0, 0, 0.1);
}
[2016-10-18 19:38:26] (ERROR @ /srv/site.ru/core/components/compiler/model/compiler/compiler.class.php: 89) [Compiler] Error in SCSS Compiler: Undefined variable $i: line: 48
Этот код из bootstrap 4
Koala компилирует нормально, без ошибок
Этот код из bootstrap 4
Koala компилирует нормально, без ошибок
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns); //line 48
}
}
Разница в том, что Compiler собирает CSS в момент сохранения файла, а MinifyX в момент обращения к странице. То есть, если надо скомпилить большой SCSS, то это будет происходить на стороне юзера, пусть и единожды (до сброса кеша), но это не очень приятно будет для него.
P.S.: А вообще, лучше отдавать генерацию SCSS какому-нибудь Gulp или PostCSS, если такая возможность есть. Compiler был написан, как раз для того, чтобы генерировать CSS из SCSS по-быстрому на рабочем проекте, на котором нет возможности поднять NodeJS.
P.S.: А вообще, лучше отдавать генерацию SCSS какому-нибудь Gulp или PostCSS, если такая возможность есть. Compiler был написан, как раз для того, чтобы генерировать CSS из SCSS по-быстрому на рабочем проекте, на котором нет возможности поднять NodeJS.
@import 'media'; // вызываю
@import url("/assets/path/src/scss/media"); // получается
@import 'media.scss'; // вызываю
@import url("/assets/path/src/scss/media.scss"); // получается
@import '_media.scss'; // вызываю
@import url("/assets/path/src/scss/_media.scss"); // получается
@import '_media'; // вызываю
@import url("/assets/path/src/scss/_media"); // получаетсяЧувствую дело не в написании, просто не инклудится файл — приходится всё писать в одном файле.
Весь же остальной SCSS-код работает безупречно.
У меня вот так на одном проекте сделано…
Есть файлы
В main.scss написано:
В настройках:
Все работает нормально при компиляции main.scss
Есть файлы
/assets/styles/scss/main.scss
/assets/styles/scss/_filename1.scss
/assets/styles/scss/_filename2.scssВ main.scss написано:
@import 'filename1';
@import 'filename2';В настройках:
compiler_scss_dir_from = /assets/styles/scss/
compiler_scss_dir_to = /assets/styles/css/
compiler_scss_skip_underscore = true
compiler_scss_with_subdirs = trueВсе работает нормально при компиляции main.scss
Т.е. его содержимое переносится при компиляции.так в том-то и дело, что у меня содержимое не переносится и на выходе получается обычный @import, вместо переноса содержимого в 1 файл.
P.S. Короче, создал тестовый сайт на модхосте и потестировал по-разному — импорт выполняется полноценно. Я же работал на другом хостинге (hvosting.ua), видно хостинг какой-то левый, что-то там нужное не включено…
Интересно, что требуется от хостинга, чтобы работал правильно @import?
ХЗ, последнее что приходит в голову — удалить и установить компонент заново ))
Ну и еще раз посмотреть в документацию, может чего найдешь полезного ))
sass-scss.ru/documentation/pravila_i_direktivi/direktiva_import.html
П.С. у меня @import 'filename' идет в самом верху после импорта *.css. Может как то влияет тоже?)))
Ну и еще раз посмотреть в документацию, может чего найдешь полезного ))
sass-scss.ru/documentation/pravila_i_direktivi/direktiva_import.html
П.С. у меня @import 'filename' идет в самом верху после импорта *.css. Может как то влияет тоже?)))
Если бы Павел добавил в Compiler возможность сжимать и js-ки, было бы удобно!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| Compiler | 1.0.5-beta от 07.12.2016 | 401 |
| SCSS | 2.0.4-pl от 25.06.2023 | 169 |
| MinifyX | 1.7.1-pl от 25.03.2019 | 14 303 |
