CODEWITHSUNDEEP
visual-studio-codewebview
louisdeb
louisdeb

Reputation: 439

Can't apply styles to VSCode Webview using html file

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

Answers (1)

louisdeb
louisdeb

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

Related Questions