网站搜索

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"));
    });