Grunt / SASS: вывод CSS в один файл и сохранение верного сопоставления источников для нескольких исходных файлов

Я настраиваю исходные карты 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 с помощью Gerillass: Библиотека Sass для эффективной стилизации
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...
1
0
325
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Одним из решений может быть компиляция в отдельные файлы для разработчика, но объединение файлов css для производства. Это может быть очевидным решением, поскольку мы все равно не хотим, чтобы файлы карт загружались в производство.

Но все равно было бы проще, если бы прямо из коробки была возможность объединять файлы.

Ответ принят как подходящий

Для вывода всех ваших стилей в единую таблицу стилей CSS я бы рекомендовал иметь один файл main.scss в корне вашего каталога scss, куда вы помещаете операторы @import, чтобы включить все остальные файлы scss, которые вы хотите, в правильном порядке.

Не забудьте добавить перед всеми частичными именами файлов (файлы, которые вы импортируете) символ подчеркивания _, например _homepage-styles.scss. Это важно, поскольку это указывает компилятору sass игнорировать компиляцию этих файлов до их эквивалентов CSS. Таким образом, компилятор выведет файл CSS для каждого файла SCSS без с подчеркиванием _.

Таким образом, ваш вывод будет main.css


Для исходных карт добавьте это в параметры конфигурации SASS:

options: {
    'sourcemap': 'auto'
}

Он должен соответствовать отдельным файлам scss. :)

Замечательно! Теперь единственная проблема заключается в том, что мои файлы .css по-прежнему выводятся как отдельные файлы, хотя я поставил им префикс подчеркивания и включил их через импорт SASS. Есть ли способ объединить их в вывод или мне нужно преобразовать их в SASS?

BBaysinger 25.10.2018 19:45

Хм, какую версию grunt-contrib-sass вы используете? Кажется, это была проблема в прошлом, но теперь ее решили. Однако есть обходной путь для добавления шаблона игнорирования в src: ['**/*.scss', '**/*.sass', '!**/_*.scss', '!**/_*.sass'],, который сообщает ему исключить те, которые начинаются с _ (проблема на github: github.com/gruntjs/grunt-contrib-sass/issues/72)

miir 25.10.2018 22:43

Ой, возможно, я неправильно понял ... Вы имеете в виду, что у них также есть файлы .cssисточник? Да, вам нужно будет преобразовать их в sass, если вы хотите использовать sass для импорта их в один основной файл css с процессом компиляции sass ... Sass должен быть надмножеством css, поэтому просто измените расширение файла на .scss. быть достаточным.

miir 25.10.2018 22:47

Другие вопросы по теме