Почему gulp не тянет css из node_modules?

Question

Я пытаюсь переместить файл gulp 3x в 4x и зацикливаюсь на том, почему при выполнении @import из моих файлов .scss gulp не получает содержимое файла.Скорее, он выводит @import....

Вот мой css метод:

function css() {
return gulp
    .src('./src/scss/**/*.scss')
    .pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
    .pipe(plumber())
    .pipe(sass({
        includePaths: ['./src/scss/', 'node_modules'],
        outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('./public/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(postcss([autoprefixer(), cssnano({
        discardComments: {
            removeAll: true
        },
        discardDuplicates: true,
        discardEmpty: true,
        minifyFontValues: true,
        minifySelectors: true
    })]))
    .pipe(sourcemaps ? sourcemaps.write('./') : noop())
    .pipe(size({gzip: true, showFiles: true}))
    .pipe(gulp.dest('./public/css/'))
    .pipe(browsersync.stream());

}

Вот мой .scss файл:

@import url('https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500');
@import "~pickadate/lib/compressed/themes/default.css";
@import "~pickadate/lib/compressed/themes/default.date.css";
@import "variables";
@import "calendar";

body {
  font-family: 'Nunito', sans-serif;
}
...

Вот что выводит gulp:

@import url("https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500");
@import url(~pickadate/lib/compressed/themes/default.css);
@import url(~pickadate/lib/compressed/themes/default.date.css);
.calendar {
    color: red;
}
body {
  font-family: 'Nunito', sans-serif;
}

В моем файле gulp 3x он скомпилирует все .scss (и любые импортированные файлы) в один .cssфайл.Вместо этого я получаю строку импорта.

Я не понимаю, что я делаю неправильно.Спасибо за любые предложения!

Answer 1

Вот то, что я придумал для всех, кто сталкивался с этим.В итоге я вручную скопировал нужные файлы css в каталог build.

Оттуда я обновил свой файл gulpfile.js следующим образом:

/**
 * Compile scss into css.
 *
 * @returns {*}
 */
function scss() {
    return gulp
        .src('./src/scss/**/*.scss')
        .pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
        .pipe(plumber())
        .pipe(sass({
            includePaths: ['./src/scss/', 'node_modules'],
            outputStyle: 'expanded'
        }))
        .pipe(gulp.dest('./public/css/'))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps ? sourcemaps.write('./') : noop())
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(gulp.dest('./build/css/'))
        // .pipe(gulp.dest('./public/css/'))
        .pipe(browsersync.stream());
}

/**
 * Combine & minify all css files.
 *
 * @returns {*}
 */
function css() {
    return gulp.src([
        "./node_modules/normalize.css/normalize.css",
        "./build/css/*.css",
        "./src/css/**/*.css"
    ])
        .pipe(plumber())
        .pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
        .pipe(concat('widget.bundle.min.css'))
        .pipe(postcss([autoprefixer(), cssnano({
            discardComments: {
                removeAll: true
            },
            discardDuplicates: true,
            discardEmpty: true,
            minifyFontValues: true,
            minifySelectors: true
        })]))
        .pipe(sourcemaps ? sourcemaps.write('./') : noop())
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(gulp.dest('./public/css/'));
}

...

const watch = gulp.parallel(watcher);
const styles = gulp.series(scss, css);

exports.watch = watch;
exports.styles = styles;

Надеюсь, это поможет,Я все еще хотел бы выяснить, как избежать копирования файлов .css вручную, но это хорошее начало.