bootstrap.css不会显示在浏览器

时间:2016-07-17 23:20:30

标签: node.js twitter-bootstrap typescript angular gulp

我正在使用本教程设置一个角度为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文件也没有在浏览器中显示。

我将关于bootstrap的2行添加到我的gulp文件

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">

这是我的项目结构

Project structure

编辑:为了澄清,我看到IDE中的lib文件夹中复制了bootstrap.css文件,但我在浏览器中看不到它。请参阅Chrome开发工具下面的截图

Screenshot from chrome dev tools

关于我可能遗失的任何线索? Github回购 - https://github.com/richa008/Angular-starter-app-with-gulp

1 个答案:

答案 0 :(得分:0)

这应导入所有相关文件和目录:

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