Grunt / SASS: вывод CSS в один файл и сохранение соответствия исходного кода нескольким исходным файлам - PullRequest
Новая
       47

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

0 голосов
/ 19 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

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

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

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

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

options: {
    'sourcemap': 'auto'
}

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

0 голосов
/ 19 октября 2018

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

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

...