為什么gulp不從node_modules中提取css？

Question

我試圖將一個gulp 3x文件移動到4x並且卡住了為什么當從我的.scss文件執行@import時，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文件，但這是一個好的開始。