How to import css code to sass?

Question

Sass

Hello, I'm learning gulp now and I can't solve one problem in any way. I have a magnific-popup.css file, I need to import it into sass, and then use this task to fill in the code in a separate css file lips.css:

gulp.task('sass', function(){ // Создаем таск Sass
  return gulp.src('app/sass/**/*.sass') // Берем источник
    .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
    .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
    .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});

But the code does not appear, the following code is simply added to the css file:

@import url(app/lips/magnific-popup/dist/magnific-popup.css);

How to make the code from magnific-popup.css file appear in lips.css?

Answer 1

Hello. Just don't specify the extension when importing.

@import 'bla.css'; // вернёт @import url(bla.css);
@import 'bla'; // вернёт import как вы хотите