Bootstrap 4-alpha.6 Jumbotron不工作/出现

时间:2017-04-11 01:58:35

标签: twitter-bootstrap bower bootstrap-4 gulp-sass

我正在学习bootstrap并通过gulp / npm / bower编译完整的源代码。我无法显示jumbotron。甚至连文本都没有出现。

我在执行gulp时首先编译了我的sass,但是在_bootstrap.scss文件中注释了几行失败因为无法找到@import的文件而修复了它。

除了官方bootstrap示例中的jumbotron本身之外,所有其他组件的外观和效果都很好。如果我通过CDN运行页面或只是通过浏览器启动它,它确实有效。但如果我通过gulp编译它,jumbotron就不会出现。

我是否需要安装其他文件或插件才能通过gulp成功运行?

提前致谢!



<!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1 class="display-3">Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>
&#13;
&#13;
&#13;

&#13;
&#13;
/*!
 * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Reset and dependencies
@import "bootstrap/scss/normalize";
@import "bootstrap/scss/print";

// Core CSS
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";

// Components
// @import "bootstrap/scss/animation";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
// @import "bootstrap/scss/pager";
// @import "bootstrap/scss/labels";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/responsive-embed";
@import "bootstrap/scss/close";

// Components w/ JavaScript
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";

// Utility classes
@import "bootstrap/scss/utilities";
// @import "bootstrap/scss/utilities-background";
// @import "bootstrap/scss/utilities-spacing";
// @import "bootstrap/scss/utilities-responsive";



//Gulfile.js *****

var gulp = require('gulp');
var environments = require('gulp-environments');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mq4HoverShim = require('mq4-hover-shim');
var rimraf = require('rimraf').sync;
var cssnano = require('gulp-cssnano');
var browser = require('browser-sync');
var panini = require('panini');
var validator = require('gulp-html');
var bootlint  = require('gulp-bootlint');
var concat = require('gulp-concat');
var scsslint = require('gulp-scss-lint');
var port = process.env.SERVER_PORT || 8080;
var development = environments.development;
var production = environments.production;
var bowerpath = process.env.BOWER_PATH || 'bower_components/';


// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
  browser.init({server: './_site', port: port});
});

// Watch files for changes
gulp.task('watch', function() {
  gulp.watch('scss/**/*', ['compile-sass', browser.reload]);
  gulp.watch('html/pages/**/*', ['compile-html']);
  gulp.watch(['html/{layouts,includes,helpers,data}/**/*'], ['compile-html:reset','compile-html']);
});

// Erases the dist folder
gulp.task('clean', function() {
  rimraf('_site');
});

// Copy assets
gulp.task('copy', function() {
  gulp.src(['assets/**/*']).pipe(gulp.dest('_site'));
});

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded',
  includePaths: bowerpath
};

//gulp.task('sass', function(){
//  return gulp.src('./scss/*.scss') // directory of Sass file you want to compile
//    .pipe(sass()) // converts Sass to CSS with gulp-sass
//    .pipe(gulp.dest('./_site/css/')) // destination of your CSS 
//});

gulp.task('compile-sass', function () {
    var processors = [
        mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' }),
        autoprefixer({
            browsers: [
              //
              // Official browser support policy:
              // http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
              //
              'Chrome >= 35', // Exact version number here is kinda arbitrary
              // Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
              // we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
              // (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
              //     such that folks haven't yet had a reasonable amount of time to upgrade; and
              // (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
              //     (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
              //     Since they've been unprefixed, Autoprefixer will stop prefixing them,
              //     thus causing them to not work in the previous ESR (where the prefixes were required).
              'Firefox >= 31', // Current Firefox Extended Support Release (ESR)
              // Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
              // NOT the Edge app version shown in Edge's "About" screen.
              // For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
              // See also https://github.com/Fyrd/caniuse/issues/1928
              'Edge >= 12',
              'Explorer >= 9',
              // Out of leniency, we prefix these 1 version further back than the official policy.
              'iOS >= 8',
              'Safari >= 8',
              // The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
              'Android 2.3',
              'Android >= 4',
              'Opera >= 12'
            ]
          })
    ];
    return gulp.src('./scss/**/*.scss')
        .pipe(development(sourcemaps.init()))
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(production(cssnano()))
        .pipe(development(sourcemaps.write()))
        .pipe(gulp.dest('./_site/css/'));
});

gulp.task('compile-html', function(cb) {
  gulp.src('html/pages/**/*.html')
    .pipe(panini({
      root: 'html/pages/',
      layouts: 'html/layouts/',
      partials: 'html/includes/',
      helpers: 'html/helpers/',
      data: development() ? 'html/data/development' : 'html/data/production'
     }))
    .pipe(gulp.dest('_site'));
    //.on('finish', browser.reload);
    cb();
});

gulp.task('compile-html:reset', function(done) {
  panini.refresh();
  done();
});

gulp.task('validate-html',['compile-html'], function() {
  gulp.src('_site/**/*.html')
    .pipe(validator())
    .pipe(bootlint());
});

gulp.task('compile-js', function() {
  return gulp.src([bowerpath+ 'jquery/dist/jquery.min.js', bowerpath+ 'tether/dist/js/tether.min.js', bowerpath+ 'bootstrap/dist/js/bootstrap.min.js','js/main.js'])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./_site/js/'));
});
 
gulp.task('scss-lint', function() {
  return gulp.src('scss/**/*.scss')
    .pipe(scsslint({'config': 'scss/.scss-lint.yml'}));
});


gulp.task('set-development', development.task);
gulp.task('set-production', production.task);
gulp.task('test',['scss-lint','validate-html']);
gulp.task('build', ['clean','copy','compile-js','compile-sass','compile-html']);
gulp.task('default', ['set-development','server', 'watch']);
gulp.task('deploy', ['set-production','server', 'watch']);
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

首先,你需要安装一个名为gulp-sass的插件来编译sass到css

npm install gulp-sass --save-dev

其次,将其写入您的gulpfile.js作为要求

var sass = require('gulp-sass');

最后,在gulpfile.js

中声明gulp任务
gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss') // directory of Sass file you want to compile
    .pipe(sass()) // converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css')) // destination of your CSS 
});

您可以详细了解gulp here。 如果以后这个有用,请告诉我。干杯!

答案 1 :(得分:0)

试试此代码段

&#13;
&#13;
notebooks/
&#13;
&#13;
&#13;