Расширение VSCode WebView внешний HTML и CSS - PullRequest
Новая
       14

Расширение VSCode WebView внешний HTML и CSS

0 голосов
/ 17 мая 2019

Я пытаюсь создать расширение vscode, и цель состоит в том, чтобы отобразить веб-просмотр с внешними HTML и CSS.
Загрузка и настройка HTML работает, но, к сожалению, CSS не будет загружен.

Создание веб-просмотра, загрузка HTML и настройка: 

var resultPanel = vscode.window.createWebviewPanel("test", "TestWebView", vscode.ViewColumn.One, {});
    fs.readFile(path.join(context.extensionPath,'src','languageMenue.html'),(err,data) => {
          if(err) {console.error(err)}
          resultPanel.webview.html = data;
      });

Это работает, внутри HTML загружается CSS так: 

<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="theme.css">

CSS находится в той же папке, что и HTML (внутри папки src моего проекта расширения)

Что мне не хватает? Почему CSS не получает нагрузку?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Пожалуйста, прочтите это Управление доступом к локальным ресурсам

И обратите внимание на localResourceRoots, как показано ниже: 

const panel = vscode.window.createWebviewPanel(
        'catCoding',
        'Cat Coding',
        vscode.ViewColumn.One,
        {
          // Only allow the webview to access resources in our extension's media directory
          localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
        }
      );

Вы можете отредактировать строку для:
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'your/relative/location/here/in/your/extension/path'))]

0 голосов
/ 18 мая 2019

Прочтите руководство по просмотру vscode: https://code.visualstudio.com/api/extension-guides/webview

Обратите особое внимание на раздел «Загрузка локального контента»: https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

Существуют специальные правила для загрузки внешнихсодержание в целях безопасности.

...