Я настраиваю исходные карты SASS (grunt-contrib-sass) в задаче Grunt. В идеале CSS всех моих проектов следует объединить в один файл и сохранить исходные карты, соответствующие исходному источнику.
Моя первоначальная мысль заключалась в том, что было бы проще всего сохранить исходный источник в отдельных файлах, что упростило бы задачу, поскольку отображение будет 1-к-1, с одним выходным файлом .css для каждого исходного файла .scss. Но это не было бы идеальным решением для остальных наших проектов, поскольку мы хотели бы свести HTTP-запросы к минимуму.
Я могу видеть, как я могу объединить свои исходные файлы и вывести из них SASS для одного выходного файла, или я мог бы объединить мой вывод .css после его экспорта SASS, но, очевидно, сопоставление не будет истинным ни в одной из этих реализаций.
Похоже, это должна быть особенность grunt-contrib-sass, но я не нахожу такой возможности.
Моя конфигурация SASS выглядит так:
sass: {
dist: {
files: [{
expand: true,
cwd: './src/',
src: ['**/*.scss', '**/*.sass'],
dest: './dist',
ext: '.css'
}],
options: {
style: 'compressed',
}
}
},
Я попробовал варианты стиля в документация и обнаружил, что только два из четырех, «сжатый» и «расширенный», действительно работают. "компактный" и "вложенный" не работают. Я не вижу варианта, который бы подходил именно для того, что мне нужно.
Как я могу выводить из SASS в один файл CSS и сохранять соответствие источника нескольким исходным файлам?

Одним из решений может быть компиляция в отдельные файлы для разработчика, но объединение файлов css для производства. Это может быть очевидным решением, поскольку мы все равно не хотим, чтобы файлы карт загружались в производство.
Но все равно было бы проще, если бы прямо из коробки была возможность объединять файлы.
Для вывода всех ваших стилей в единую таблицу стилей CSS я бы рекомендовал иметь один файл main.scss в корне вашего каталога scss, куда вы помещаете операторы @import, чтобы включить все остальные файлы scss, которые вы хотите, в правильном порядке.
Не забудьте добавить перед всеми частичными именами файлов (файлы, которые вы импортируете) символ подчеркивания _, например _homepage-styles.scss. Это важно, поскольку это указывает компилятору sass игнорировать компиляцию этих файлов до их эквивалентов CSS. Таким образом, компилятор выведет файл CSS для каждого файла SCSS без с подчеркиванием _.
Таким образом, ваш вывод будет main.css
Для исходных карт добавьте это в параметры конфигурации SASS:
options: {
'sourcemap': 'auto'
}
Он должен соответствовать отдельным файлам scss. :)
Хм, какую версию grunt-contrib-sass вы используете? Кажется, это была проблема в прошлом, но теперь ее решили. Однако есть обходной путь для добавления шаблона игнорирования в src: ['**/*.scss', '**/*.sass', '!**/_*.scss', '!**/_*.sass'],, который сообщает ему исключить те, которые начинаются с _ (проблема на github: github.com/gruntjs/grunt-contrib-sass/issues/72)
Ой, возможно, я неправильно понял ... Вы имеете в виду, что у них также есть файлы .cssисточник? Да, вам нужно будет преобразовать их в sass, если вы хотите использовать sass для импорта их в один основной файл css с процессом компиляции sass ... Sass должен быть надмножеством css, поэтому просто измените расширение файла на .scss. быть достаточным.
Замечательно! Теперь единственная проблема заключается в том, что мои файлы
.cssпо-прежнему выводятся как отдельные файлы, хотя я поставил им префикс подчеркивания и включил их через импорт SASS. Есть ли способ объединить их в вывод или мне нужно преобразовать их в SASS?