Question

我想在 VSCode WebView API 的HTML页面中使用外部CSS，JS和JQuery。

我添加了以下代码以使用外部CSS文件创建webView，但是我的HTML页面无需更改CSS，JS和JQuery即可加载。我无法获得我们需要如何在HTML页面中引用此信息。

const panel = vscode.window.createWebviewPanel('catCoding', "Cat Coding", vscode.ViewColumn.One, {
    enableScripts: true
});

const onDiskPath = vscode.Uri.file(path.join(__dirname, 'src/webapp/css', 'styles.css'));

const webSrc = onDiskPath.with({ scheme: 'vscode-resource' });

我还在HTML中添加了以下内容安全策略代码，以消除限制。

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src vscode-resource:; style-src vscode-resource:;">

请让我知道如何使用VSCode Web视图API使用外部CSS，JS和JQuery呈现HTML。

Answer 1

也许您需要允许使用localResourceRoots访问src？

从cat example的内容位于媒体文件夹中...

import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
        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(extensionPath, 'media'))
            ]
        });

        const onDiskPath = vscode.Uri.file(path.join(extensionPath, 'media', 'cat.gif'));
        const catGifSrc = onDiskPath.with({ scheme: 'vscode-resource' });

        panel.webview.html = getWebviewContent(catGifSrc);
    }));
}

vscode WebView API中的外部CSS，JS和Jquery

1 个答案: