Answer a question

I'm trying to create a vscode extension and the goal is to display a webview with a extern html and css.
Loading and setting the html works but unfortunately the css won't get load.

Creating webview,loading html and setting :

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

This works, inside the html the css get loaded like that :

<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">

The css is in the same folder as the html (inside the src folder of my the extension project)

What am I missing? Why the css won't get load?

Answers

Please read this Controlling access to local resources

And note about localResourceRoots as below code:

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

You can edit the line to:
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'your/relative/location/here/in/your/extension/path'))]