CODEWITHSUNDEEP
visual-studio-codewebviewvscode-extensions
Sanjay Verma
Sanjay Verma

Reputation: 1636

VSCode webview - remove default styles

I'm building my own live html extension based on webview, however the rendered iframe always gets some default styles attached. Is there a way to remove the default styles?

Screenshot using Webview developer tools: screenshot

My template doesn't have all these <html style= attributes except one:

<!DOCTYPE html>
<html lang="en" style="color: red">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body style="background-color: white">
    ${text}
</body>
</html>

Upvotes: 1

Views: 499

Answers (1)

MM.
MM.

Reputation: 58

  • Use a reset stylesheet. This will entirely reset the existing styling and allow you to build new styles on top - maybe npm install normalize.css -D.
  • A point which runs perpendicular to your question: it's much more secure to do npm install tailwindcss -D in your extension, then you can load the styling using script src="" around vscode.Webview.asWebviewUri. The preview resources have to be bundled separately for sanity. It will still be much more secure than the external JS in your snippet.

Upvotes: 1

Related Questions