@import url не работает с gulp-ruby-sass

Я пытаюсь скомпилировать свой scss в файле css. Все работает, за исключением этого:@import url не работает с gulp-ruby-sass

@import url ('http://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700');

В моем CSS, у меня то же самое:

@import url("http://fonts.googleapis.com/css?family=Roboto:400,500,700,300"); 
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} ......

Вот мой Глоток задачу:

return sass(vendorFiles.scss.app, { 
     compass: true, 
     style: 'compressed' 
    }) 
     .on('error', sass.logError) 
     .pipe(rename('app.css')) 
     .pipe(gulp.dest(distPaths.css)); 
});

Я пытался без кавычек, без URL, ничего из этого не получалось. Другие импортируют работу, но когда я пытаюсь использовать URL-адрес @import, с любым URL-адресом, это не имеет значения, он не будет работать.

Любые идеи?

источник

2017-02-07 Coincoin Yuki

Что вы подразумеваете под этим не будет работать? Вы получаете ошибку sass?

Попробуйте HTTPS --- обратите внимание на "s"

ли это первая строка вашего CSS?

Где и как вы используете Roboto - я не вижу ссылки на него?

источник

2017-02-07 22:23:22 Mark

У меня нет ошибки в саске. В моем css (скомпилированном) я получаю ту же строку, никаких преобразований или ошибок, просто @import url (...). Я попробовал «http» и https тот же результат. Я пробовал несколько URL (например, значки материалов), и у меня тот же результат. Это может быть моя первая строка css, если я сначала напишу ее в своем приложении app.scss, но проблема будет такой же, если я поставлю ее в конце, в середине или в любом месте:/ –

Вы не должны использовать @import, так как это может вызвать проблемы с блоком рендеринга, и я пробовал @import в VSCode с sass-lint. Они показали ошибку.

Я предложил бы использовать таким образом:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

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

Решение: найдите вызовы @ import и замените их.

Обнаружение: используйте инструмент pagespeed. В левом столбце один из элементов: «Избегайте импорта @ CSS». Если у вас есть зеленая галочка, никаких @imports не найдено. Если будет найден, появится красный «x».

Подробности: Импорт CSS выглядит так и обычно находится в верхней части файла.

@import url("style.css")

Вместо того, чтобы вызвать этот файл CSS, используя метод импорта, то лучше просто держать, что дополнительные CSS в только один файл (скопировать и вставить импортированный CSS в исходный файл CSS).

Для получения дополнительной информации: Перейдите по этой ссылке. Dont use @import

источник

2017-02-08 16:40:29 nrvarun

Это отличный ответ, но не для моей проблемы ^^ Когда я компилирую мой .scss в один файл .css, import url не работает для url. Компиляция выполняется только один раз на вашем сервере, поэтому проблемы с блоком рендеринга не выполняются. Но спасибо за ответ! –

@import url не работает с gulp-ruby-sass

ответ

Смежные вопросы