引导不包括在使用gulp和浏览器同步的已编译CSS中

问题描述 投票:0回答:1

使用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文件。

Gulp:CLI版本:2.2.0本地版本:4.0.2

sass bootstrap-4 gulp browser-sync gulp-sass
1个回答
0
投票

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

但是我仍然不知道为什么gulp.src('app/scss/**/*.scss')无效。

© www.soinside.com 2019 - 2024. All rights reserved.