使用 gulp 和 browser-sync 编译的 css 中不包含引导程序

Question

使用 Gulp 和 Browser-sync 进行编译时，Bootstrap 未包含在我编译的 CSS 文件中。我正在尝试编译我的自定义 SCSS 文件和 Bootstrap SCSS 文件。

我尝试注释掉一些 SCSS 文件，但只有自定义文件（我自己的 SCSS 文件）被添加到编译后的 CSS。

const gulp        = require("gulp");
const sass        = require("gulp-sass");
const browserSync = require("browser-sync").create();
const cleanCSS    = require('gulp-clean-css');
const rename      = require("gulp-rename");

// Compile SCSS into CSS

function style() {
  // 1. location of SCSS files
  return gulp.src('app/scss/**/*.scss')
  // 2. pass that file through the sass compiler
    .pipe(sass().on('error', sass.logError))
  // 3. rename the output
    .pipe(rename('custom-style.css'))
  // 3. location of saved CSS file
    .pipe(gulp.dest('app/css'))
  // 5. minify and check compatibility
    .pipe(cleanCSS({compatibility: 'ie8'}))
  // 6. rename to .min
    .pipe(rename({suffix: '.min'}))
  // 7. add to app/css directory
    .pipe(gulp.dest('app/css'))
  // 4. stream changes to all browsers
    .pipe(browserSync.stream())
}

function watch() {
  browserSync.init({
    server: {
      baseDir: 'app/'
    }
  });
  gulp.watch('app/scss/**/*.scss', style);
  gulp.watch('app/*.html').on('change', browserSync.reload);
  gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

目录：

project-folder
|-- app
    |-- scss
        |-- bootstrap
            |-- bootstrap.scss
        |-- stylesheets
            |-- custom.scss
        |-- app.scss
    |-- css
        |-- custom-style.css
        |-- custom-style.min.css
    |-- node_modules
        |-- gulp_packages
        |-- bootstrap
|-- gulpfile.js
|-- package.json
|-- package-lock.json

在 bootstrap.scss 中：

 /*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";
@import "../../../node_modules/bootstrap/scss/grid";
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/buttons";
@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/dropdown";
@import "../../../node_modules/bootstrap/scss/button-group";
@import "../../../node_modules/bootstrap/scss/input-group";
@import "../../../node_modules/bootstrap/scss/custom-forms";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../node_modules/bootstrap/scss/pagination";
@import "../../../node_modules/bootstrap/scss/badge";
@import "../../../node_modules/bootstrap/scss/jumbotron";
@import "../../../node_modules/bootstrap/scss/alert";
@import "../../../node_modules/bootstrap/scss/progress";
@import "../../../node_modules/bootstrap/scss/media";
@import "../../../node_modules/bootstrap/scss/list-group";
@import "../../../node_modules/bootstrap/scss/close";
@import "../../../node_modules/bootstrap/scss/toasts";
@import "../../../node_modules/bootstrap/scss/modal";
@import "../../../node_modules/bootstrap/scss/tooltip";
@import "../../../node_modules/bootstrap/scss/popover";
@import "../../../node_modules/bootstrap/scss/carousel";
@import "../../../node_modules/bootstrap/scss/spinners";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../../node_modules/bootstrap/scss/print";

运行 gulp watch 时没有任何错误。编译过程中包含的唯一 SCSS 文件只是我的自定义 SCSS 文件。

吞咽： CLI 版本：2.2.0 本地版本：4.0.2

Answer 1

通过将gulp.src 从gulp.src('app/scss/**/*.scss') 更改为gulp.src('app/scss/app.scss') 解决了问题。

但我仍然不知道为什么gulp.src('app/scss/**/*.scss') 不起作用。