vscode webview api中的外部CSS，JS和Jquery

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 中添加了 Content-Security-Policy 的以下代码以消除限制。

<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);
    }));
}