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 и сохранить правильное сопоставление источника с несколькими исходными файлами?


person BBaysinger    schedule 19.10.2018    source источник


Ответы (2)


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

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

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


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

options: {
    'sourcemap': 'auto'
}

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

person miir    schedule 19.10.2018
comment
Замечательно! Теперь единственная проблема заключается в том, что мои файлы .css по-прежнему выводятся как отдельные файлы, даже несмотря на то, что я добавил к ним префикс с подчеркиванием и включил через импорт SASS. Есть ли способ объединить их в вывод или мне нужно преобразовать их в SASS? - person BBaysinger; 25.10.2018
comment
Хм, какую версию grunt-contrib-sass вы используете? Вроде раньше такая проблема была, но решилась. Тем не менее, есть обходной путь для добавления шаблона игнорирования в src: ['**/*.scss', '**/*.sass', '!**/_*.scss', '!**/_*.sass'],, который сообщает ему исключить те, которые начинаются с _ (проблема на github: github.com/gruntjs/grunt-contrib-sass/issues/72) - person miir; 25.10.2018
comment
О, возможно, я неправильно понял... вы имеете в виду, что у вас также есть .css исходные файлы? Да, вам придется преобразовать их в sass, если вы хотите использовать sass для их импорта в один основной файл css с процессом компиляции sass... Sass должен быть надмножеством css, поэтому просто изменение расширения файла на .scss должно быть достаточным. - person miir; 25.10.2018

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

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

person BBaysinger    schedule 19.10.2018