Question

我正在尝试创建vscode扩展，目标是显示带有外部HTML和CSS的Web视图。
加载和设置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不会加载？

Answer 1

要执行此操作，您必须指定存储css文件的绝对路径。

即

<link rel="stylesheet" type="text/css" href="/path/to/dir/of/theme.css">

由于vscode建议使用secure content policy，因此动态加载路径的方式如下：

<link rel="stylesheet" type="text/css" href="{{styleSrc}}">

其中{{styleSrc}}被绑定为：

const styleSrc = vscode.Uri.file(path.join(vscode.context.extensionPath, '/path/to/dir/of/theme.css')).with({ scheme: 'vscode-resource' })

或使用asWebviewUri API：

const onDiskPath = vscode.Uri.file(path.join(vscode.context.extensionPath, '/path/to/dir/of/theme.css'))
const styleSrc = panel.webview.asWebviewUri(onDiskPath)

其中panel是用vscode.window.createWebviewPanel(...)创建的那个

有关更多信息，请参见：https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

Answer 2

通读vscode网络视图指南：https://code.visualstudio.com/api/extension-guides/webview

请特别注意“加载本地内容”部分：https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

出于安全原因，有一些特殊规则用于如何加载外部内容。

Answer 3

请阅读此Controlling access to local resources

并注意以下代码：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'))]

VSCode Extension webview外部html和css

3 个答案: