如何使用引用的节点模块中的样式表

Question

I'm writing a VS Code module. It uses highlight.js to generate HTML for syntax highlighting of source code. The highlight.js npm module contains a folder styles which is full of CSS files I would like to use.

What do I have to do so that I can access these CSS files at run-time?

I mean all of them .

I suspect something like require will be needed to cause them to be bundled in the absence of an explicit reference to each CSS file, but I need guidance on how to do this.

Also how does one access the bundled resources?

Answer 1

You don't have to do anything. Bundling happens automatically. Your project's node_modules folder accompanies the extension when it is deployed.

To access resources within these modules you need to know where they are. The answer to that is they are deployed to a node_modules folder located directly on the extension path.

So how do you determine the location of the extension folder at run-time? You could use the method described by VSCode extensions location variable but I don't recommend it. Instead, do it like this:

let x = vscode.extensions.getExtension("dilcorp.groovyext");
if (!x) {
  throw new Error("Cannot resolve extension. Has the name changed? " +
                  "It is defined by the publisher and the extension name " + 
                  "which are defined in package.json`); 
}
let stylePath = `${x.extensionPath}/node_modules/highlight.js/styles`;

There are two parts to the above code. First we get runtime information about the extension, which includes its absolute file path as a property extensionPath .

The second part exploits the fact that our extension project's node_modules is copied into the extensionPath folder.

This works in the debugger.