我正在学习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 »</a></p>
</div>
</div>
/*!
* 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']);
答案 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)
试试此代码段
notebooks/