ブートストラップのローカルコピーにリンクすると、CSS

が壊れます。ここに問題があります。私は仕事用の角度+ブートストラップアプリを開発しています。私は開発の最初の段階です。私はブートストラップを使用してUIのいくつかを構築しようとしています。しかし何らかの理由で、私がブートストラップのローカルコピーにリンクするたびに、すべてのCSSが壊れます。それが細かくされているかどうかは関係ありません。私は、ブートストラップのCDNのバージョンをコメントアウトし、私のローカルコピーをアンコメントする場合はここでブートストラップのローカルコピーにリンクすると、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>

を持っているもの、すべてが正常に動作しています。私はローカルコピーを使用してオフラインで作業することができます。どんな助けでも大歓迎です。

EDIT

ちょうど私が正しいローカルパスを持っていることを示すために、ここではプロジェクトのフォルダ構造がある（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

EDIT 2

私はChromeのデベロッパーツールをチェックして、そこにどのようなエラーがあるのかを知りました（私にアイデアを与えるAnonymouseのおかげで） d up

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"

出典

2016-04-14 MuffinTheKid

あなたのブートストラップにcdnバージョンをコピーしてみましたか？css –

「私のローカルコピーをコミットすれば、すべて正常に動作します。」とはどういう意味ですか？ – kojow7

ローカルCSSファイルへの正しいパスを使用していることを確認してください。 – frederickf

グッドニュース

私はこの問題を考え出しました。この問題は私のサーバーコードで発生しました。ここで

はこの問題は、それは私が持っていることを確認していなかった

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

されている必要がありますラインで

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

た参照

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...');

のコードですpathが、cssファイルとjsファイルのエクスプレススキャンの場合は正しくなります。

物語の道徳は、細部にわたって光沢を持たない。

出典

2016-04-14 20:14:02 MuffinTheKid

がhereからローカルバージョンを取得する代わりに、CDNを使用しないでくださいです。これは、シンプルさ、スピード、柔軟性によるものです。あなたは（私がする）しなければならないすべて、あなたの問題は、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を使用して、すべての私の地元のlibsをアップグレードするには、rootでスクリプトを作成し、これが解決策ですそれだけでなく。

出典

2016-04-14 18:57:25 RhysO

私のローカルバージョンはブートストラップサイトからのものです。また、私はこれを試してみます。 – MuffinTheKid

@MuffinTheKidはCDNのリンクを削除し、ローカルのコメントを外します。 JSも必要です。また、（デバッグの目的で）CSSマップもお勧めします。 – RhysO

はそれをすべて行いましたが、何らかの理由でまだ動作しません。 – MuffinTheKid

ブートストラップのローカルコピーにリンクすると、CSS

答えて

関連する問題