VSCode 扩展 webview 外部 html 和 css答案

【问题标题】：VSCode Extension webview external html and cssVSCode 扩展 webview 外部 html 和 css
【发布时间】：2019-10-04 12:49:02
【问题描述】：

我正在尝试创建一个 vscode 扩展，目标是显示一个带有外部 html 和 css 的 webview。
加载和设置 html 工作，但不幸的是 css 不会被加载。

创建 webview，加载 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 不会加载？

【问题讨论】：

对我来说也一样，不是简单的 CSS 链接。您找到实现这一目标的方法了吗？

标签： html css visual-studio-code vscode-extensions

【解决方案1】：

阅读 vscode webview 指南：https://code.visualstudio.com/api/extension-guides/webview

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

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

【讨论】：

【解决方案2】：

请阅读此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'))]

【讨论】：

【解决方案3】：

要完成这项工作，您必须指定存储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

【讨论】：

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

【解决方案4】：

您必须将html文件中的css文件名替换为styleUri.toString()，仅与{{styleSrc}}绑定不起作用。

const htmlPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, '/res/html/index.html'));
var html = fs.readFileSync(htmlPathOnDisk.path).toString();

const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, '/res/css/styles.css'));
const styleUri = webview.asWebviewUri(stylePathOnDisk);
html = html.replace('filename_of_css_file_in_your_html_file.css', styleUri.toString());

// continue for any other resources, e.g. scripts

webview.html = html

【讨论】：