Reputation: 439
I am building a VSCode Webview and trying to apply some css.
The only success I have had is with the following method
const webview = this._panel.webview;
const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, '/res/css/styles.css'));
const styleUri = webview.asWebviewUri(stylePathOnDisk);
webview.html = `
<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='${styleUri}'>
</head>
<body>
<h1>test</h1>
</body>
</html>
`
But I'd like to have my html in a separate file, used like so
const htmlPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, '/res/html/index.html'));
webview.html = fs.readFileSync(htmlPathOnDisk.path).toString();
However, I cannot use ${styleUri}
within that html file. Nor can I use <link ref='stylesheet' type='text/css' href='{{styleUri}}>
, nor EVEN can I use <style>
tags within the <head>
tags (none of these apply the css.
The first two methods (in the above sentence) I understand I may be incorrectly implementing, but the third style I didn't expect to fail.
Any advice?
Upvotes: 2
Views: 658
Reputation: 439
As told by @Matt Bierner, here is the solution.
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('${styleUri}', styleUri.toString());
// continue for any other resources, e.g. scripts
webview.html = html
Upvotes: 2