Я использую cssmin для файлов, содержащих @imports. cssmin рекурсивно импортирует локальные файлы правильно, но для импорта, указывающего на URL-адрес, импорт остается встроенным. Это приводит к тому, что полученный миниатюрный CSS недействителен, поскольку @ rules должны находиться в начале файла. Кто-нибудь знает хорошее решение или обходное решение этой проблемы?cssmin неправильно обрабатывает @import
Используйте следующий процесс:
node-lessless первогоcssminСсылки
У меня точно такая же проблема с cssmin и @import, и я нашел решение с ворчанием Concat:
Grunt Код задачи: выполнить (CONCAT: cssImport)
grunt.initConfig({
concat: {
cssImport: {
options: {
process: function(src, filepath) {
return "@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);"+src.replace('@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);', '');
}
}
},
files: {
'your_location_file_origin/file.full.min.css': ['your_location_file_destination/file.full.min.css']
}
})}
Мое вдохновение приходит от https://github.com/gruntjs/grunt-contrib-concat#custom-process-function.
Я добавил параметр processImport: false, чтобы хрюкать.
'cssmin': {
'options': {
'processImport': false
}
}
Это неправильно! Он делает grunt игнорировать заявления импорта, а не перемещать его вверх – olefrank
Выставление импорт в верхней части моей СКС не работает для меня, я в конечном итоге импортировать внешние таблицы стилей непосредственно из HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300"
rel="stylesheet">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
......
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link el="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/app.css">
У меня было что-то подобное в styles.scss:
@import url(custom-fonts.css);
Моя проблема была @import не смог найти файлы becaus e корень путь отсутствовал. Вот что я сделал с генератором углов Yuoman Gruntfile.JS конфигурации:
cssmin: {
options: {
root: '<%= yeoman.dist %>/styles/'
}
},
Полезные ссылки grunt-contrib-cssmin issue #75
Я знаю, что этот вопрос в течение очень долгого времени, но я этот пост для любого, кто ищет этого вопроса на переполнение стека ... просто поместить ваш код в/! ..../как это:
/*! * @import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */
будет включать в пункт назначения мин CSS, но не забывайте использовать удаленный импорт в верхней части страницы.
Попробуйте запустить cssjoin, затем cssmin? https://github.com/suisho/cssjoin Или почему бы не локализовать файл из import @ url? –
cssjoin также включает @imports в середину файла. Я не могу локализовать URL. – user3204380
У меня была такая же проблема с cssmin. Я смог обойти это, добавив операторы @import в начало первого файла, который я объединил. –