node.js - bootstrap.css 在浏览器中无法显示
我正在使用这个教程搭建一个 Angular 2 和 Gulp 的项目。http://blog.codeleak.pl/2016/03/quickstart-angular2-with-typescript-and.html
我唯一做的更改是我在 package.json 中添加了 bootstrap,但它没有在浏览器中显示。在我的 IDE 项目中,它显示在 node_modules 和 lib 文件夹中。但如果我使用它们,bootstrap 类不会被应用。bootstrap.min.css 文件在浏览器中也没有显示。
我在我的 gulp 文件中添加了关于 bootstrap 的两行代码
gulp.task("libs", () => {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**',
'bootstrap/dist/js/bootstrap.min.js',
'bootstrap/dist/css/bootstrap.min.css'
], {cwd: "node_modules/**"}) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});
我在 index.html 中添加了这一行以包含它
<link rel="stylesheet" type="text/css" src="lib/bootstrap/dist/css/bootstrap.min.css">
这是我的项目结构
编辑:只是想澄清一下,我在 IDE 的 lib 文件夹中看到了复制过来的 bootstrap.css 文件,但在浏览器中看不到它。请看下面来自 Chrome 开发者工具的截图
有什么线索说明我可能错过了什么吗?Github 仓库 - https://github.com/richa008/Angular-starter-app-with-gulp
答案#1
这应该会导入所有相关的文件和目录:
gulp.task("libs", () => {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**',
'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});

