vscodeで外部cssのフルパスが適応されない

Question

Visual Studio Codeでブログ記事を書いています。
Live HTML Previewerという拡張機能を使用中での状況です。

ブログ（FC2ブログ）のテンプレートで設定しているcssをVSCodeで編集中の場合でも反映したくて、Blog TMP MyCSS.css というファイルに必要なcssを書き出しました。
で、編集するhtml記事内に

<link rel="stylesheet" href="c:\MyData\Memo\Blog\Blog TMP MyCSS.css">

とフルパス記述したのですがこのcssが反映されません。
たまたま記事の下書きと同じフォルダ（ディレクトリ）にBlog TMP MyCSS.css があるので

<link rel="stylesheet" href="Blog TMP MyCSS.css">

と記述するとcssが反映されました。
このパス／url の部分でマウスを左クリックすると
“Ctrlキーを押しながらクリックしてリンク先を表示”
のガイダンスが出るのでクリックするとフルパスを記述した場合はエラーが出ます。
Atom はこのフルパス指定が反映されるのですがVScode ではどうすれば良いのでしょうか。

仕様環境
Windows 7
Visual Studio Code ver 1.10.2
＋拡張機能 Live HTML Previewer

Answer 1

私も同じ問題に直面しました。

以下の手順で、外部スタイルcssは、反映されました。

(1)『エディタを2分割する』で左にHTML、CSSを表示、右にHTMLプレビューを表示させる。
(2)右エディタにshow sourceで、HTMLソースコードを一度表示させる。
(3)すぐに表示させたshow sourec(ソースコード)を閉じる。
するとVScodeが再度HTMLプレビューを読み込んで、外部スタイルCSSが反映される。

少し面倒な手順が必要ですが、CSSがHTMLプレビューに反映されました。

HTMLとCSSファイルは同じフォルダに入れる必要があります。
別フォルダだと、上記(1)～(3)手順でもHTMLプレビューに反映されませんでした。

＜使用環境＞
Visual Stadio Code バージョン1.52
Windows 10 pro
HTML Previewer

Answer 2

"markdown.styles": [
        "file:///Users/thaya/.vscode/pdf_css.css"],

settings.jsonに上記を書き入れ、Ctrlクリックで該当CSSが開くのを確認していますが、settings.jsonを保存するとエラーが出てしまいます。

Windows10 64bitです。

Answer 3

これ私も困ってます。Ctrlキーを押しながらクリックすると、該当ファイルが開かれますが、エラーが出てしまいます。

Answer 4

どうやっても方法が見つからなかったので、HTML内に

<style type="text/css"> で、全てのCSSを書き込んだ。 追記 　CSSファイルをHTMLの編集ファイルと同じフォルダーに置き、パスを全て削除。 　ファイル名だけ記述したら反映された。 追記２ 　相対パスなら反映される事も判明。

Answer 5

<link rel="stylesheet" href="c:\MyData\Memo\Blog\Blog TMP MyCSS.css">

記述が下記のようになります。
"file:///C:/MyData/Memo/Blog/Blog TMP MyCSS.css"

記述が分からなくなった時はローカルファイルをbrowserで開き、そのurlをコピーするのが簡単です。

Comments

[hgforteratail]

その様に記述しましたが反映されませんでした。
ところで御回答戴いただいたディレクトリの区切り記号は / ですが、これはバックスラッシュ（￥）と兼用できるのでしょうか。
もう一つ。エクスプローラで開いてパスをコピーしてもfile:///というのは取得できませんでした。
ローカルファイルをブラウザで開くというのがどういう風にすればいいのかが判っていません。私がいつも使っているブラウザはFirefoxですが、これを使用してローカルファイルを開くとは開いたことがないので。
すいません。
四の五の言わずにFirefoxで開いてみました。
url は御回答戴いた通りでした。urlをコピーすると下記の文字列が得られました。
file:///C:/MyData/Memo/Blog/Blog%20TMP%20MyCSS.css
通常フルパスの記述にfile:///というのを見かけたことがないのですが、これは一体どういうことを意味しているのか、宜しければご教授願いませんか？

ごちゃごちゃ書いて申し訳ありません。ディレクトリとurlの区切り記号は違うと言うことに気がつきました。

でも相変わらずフルパス（url ）では反映されません。

[hgforteratail]

PS：いずれの方法でもAtom では反映されます。

[hgforteratail]

magicp様
御回答ありがとうございます。
現在の状況を整理します。
1. /と\の件、url での表記を勘違いしていました。
2. file:/// の表記、調べて概要は理解致しました。
3. url 表記のスペースに%20 を使用するのだというを理解しました。

ご指摘の通り書替えました。
このurl クリックしその時に出るガイダンスに従うと、
該当のcss ファイルが開きますので、正常にリンク先が記述されていると、判断されています。
でも相変わらず、css は反映されません。

[退会済みユーザー]

cssファイルが開きます･･･判断されています。⇔ cssは反映されません。 この意味が分かりません
今回に影響しているかは分かりませんが、プラットフォームによっては意図しない動作になるため、ファイル名はすべて小文字、スペースは含めないことをお勧めします。

[hgforteratail]

Visual Studio Code では、html 文を編集中、url をクリックすると吹き出しのガイダンスが出ます。
“Ctrlキーを押しながらクリックしてリンク先を表示”
と云うものです。
この指示の通り操作すると
c:\MyData\Memo\Blog\Blog TMP MyCSS.css
というパス指定では
“ファイルが開くことが出来ません：ファイルが見つかりません”
と云うエラーが出ます。
css に記述したスタイルは適用されません。

<link rel="stylesheet" href="Blog TMP MyCSS.css">
というファイル名だけの指定では
同様の操作を行うと上記のファイルが開きます。
なおかつhtml 文内の記事にcss で指定したスタイルが反映されます。

file:///C:/MyData/Memo/Blog/Blog TMP MyCSS.css
というurl 指定で同じ操作をすると
ファイルはエラーが出ず開くのでVSCode 上では正しく表記できているのだと思いましたが、
css で指定したスタイルは反映されません。

という意味です。

ファイル名をスペースを含めず全て小文字で記述しましたが状況は同じです。
他のフォルダ（ディレクトリ）の名称を全て小文字にするのは他への影響が大きいので採用できません。

もし、そのせいだとすると、ディレクトリ名を省いた単独のファイル名が大文字＋スペースもあるのに開くのがなぜか、判然としません。

どちらにしろ編集中のhtml 文と同じディレクトリにcss ファイルを入れておけば良いのでこれで運用しています。

[退会済みユーザー]

>css で指定したスタイルは反映されません。
何で見て反映されないのでしょうか？VSCodeで見れたのであればこの質問は解決していると思います。
Live HTML Previewerを見てのことでしたら最初の質問内容とは別の問題だと思います。

[hgforteratail]

なるほど
最初の質問で
Live HTML Previewerという拡張機能を使用中での状況です。
と書いてますが、言葉足らずだったようです。
すいませんでした。