Question

所以这就是问题所在。我正在开发一个角度+引导程序的应用程序，我正处于开发的最初阶段。我正在尝试使用bootstrap构建一些UI。但是，出于某种原因，任何时候我链接到Bootstrap的本地副本，所有的CSS都会中断。它是否缩小并不重要。

这就是我现在所拥有的

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/client/app/lib/bootstrap/bootstrap.css">
    <!-- Latest compiled and minified CSS -->
    <!--<link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">-->
</head>
<nav>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a>Option A</a></li>
            <li role="presentation"><a>Option B</a></li>
            <li role="presentation"><a>Option C</a></li>
            <li role="presentation" class="active"><a>Option D</a></li>
        </ul>
</nav>
<body>


    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">Stuff goes here!</div>
        </div>
    </div>

</body>
</html>

如果我注释掉了bootstrap的cdn版本并取消注释我的本地副本，那么一切正常。我更喜欢使用本地副本，因此我可以离线工作。任何帮助将不胜感激。

修改

只是为了表明我的本地路径是正确的，这里是项目文件夹结构（忽略node_modules文件夹内容）

Client
\---app
    +---core
    \---lib
         +---angular  (ignoring content of this folder)
         +---bootstrap
                bootstrap.css
         \---font-awesome-4.5.0 (ignoring content of this folder)
\---node_modules (ignoring content of this folder)
Server
   web-server.js

编辑2

我正在检查Chrome中的开发者工具，看看可能出现的错误（感谢Anonymouse给我这个想法），这就是弹出的内容

Uncaught SyntaxError: Unexpected token <              bootstrap.js:1

接下来将带我到index.html并突出显示我有bootstrap.js脚本标记的行。

这是下一个错误

Resource interpreted as Stylesheet but transferred with MIME type text/html:
"http://localhost:7000/lib/bootstrap/boostrap.css"

Answer 1

请勿使用CDN，而是从here获取本地版本。这是由于简单，快速和灵活。你所要做的就是（我这样做），在root中创建一个脚本来使用cdn升级我所有的本地库（见下文）

mkdir updateLib
cd updateLib
mkdir css
mkdir js
mkdir img
cd css

REM use Curl -O http://cdn.url here (you ust have cygwin installed)

cd ..
cd js

REM use Curl -O http://cdn.url here (you ust have cygwin installed)

cd ..
cd ..
copy lib/img/* updateLib/img

rm -rfv lib
REN updateLib lib

msg %username% "libs updated!"

如果您的问题是使用CDN，那么这也是一个解决方案。

Answer 2

好消息

我弄明白了这个问题。问题起源于我的服务器代码。

以下是参考代码

var express = require('express');
var path = require('path');
var app = express();
var rootPath = path.normalize(__dirname + '/../');

app.use(express.static(rootPath + '/app'));

app.get('*', function(req, res) { res.sendFile( rootPath + 'client/app/core/index.html'); });

app.listen(8000);
console.log('Listening on port 8000...');

问题在于

app.use(express.static(rootPath + '/app');

应该是

app.use(express.static(rootPath + 'client/app');

在快速扫描css和js文件时，我没有确保路径正确。

故事的道德，永远不会掩盖小细节。

链接到Bootstrap的本地副本会破坏CSS

2 个答案: