Visual studio code 在创建vscode扩展时，如何包含编译的苗条风格？_Visual Studio Code_Svelte

Visual studio code 在创建vscode扩展时，如何包含编译的苗条风格？

visual-studio-code

Visual studio code 在创建vscode扩展时，如何包含编译的苗条风格？,visual-studio-code,svelte,Visual Studio Code,Svelte,我正在创建我的第一个VScode扩展。我用Svelte创建了一个边栏webview，当我在本地运行它时，它就像一个梦。它将我的苗条代码编译到我的out/compiled文件夹中。然后我创建了一个.vsix文件。当我安装它时，每个命令都存在并工作，但当我按下图标打开webview时，我得到“404无法加载资源sidebar.js和sidebar.css”。。这些路径指向out/compiledpath，但不包含任何css或js。。为什么不进行编译？我使用vsce包创建我的vsix文件。如果

我正在创建我的第一个VScode扩展。我用Svelte创建了一个边栏webview，当我在本地运行它时，它就像一个梦。它将我的苗条代码编译到我的

out/compiled

文件夹中。然后我创建了一个

.vsix

文件。当我安装它时，每个命令都存在并工作，但当我按下图标打开webview时，我得到“404无法加载资源sidebar.js和sidebar.css”。。这些路径指向

out/compiled

path，但不包含任何css或js。。为什么不进行编译？我使用

vsce包

创建我的

vsix

文件。如果有帮助的话

这是我的

扩展名.ts

，在这里我加载了我编译的样式和js：

  private _getHtmlForWebview(webview: vscode.Webview) {
    const styleResetUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
    );
    const styleVSCodeUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
    );

    const scriptUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "out", "compiled/sidebar.js")
    );
    const styleMainUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "out", "compiled/sidebar.css")
    );

    // Use a nonce to only allow a specific script to be run.
    const nonce = getNonce();

    return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <!--
                    Use a content security policy to only allow loading images from https or from our extension directory,
                    and only allow scripts that have a specific nonce.
        -->
        <meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${
          webview.cspSource
        }; script-src 'nonce-${nonce}';">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="${styleResetUri}" rel="stylesheet">
                <link href="${styleVSCodeUri}" rel="stylesheet">
        <link href="${styleMainUri}" rel="stylesheet">
        <script nonce="${nonce}">
          const tsvscode = acquireVsCodeApi();
        </script>
            </head>
      <body>
                <script nonce="${nonce}" src="${scriptUri}"></script>
            </body>
            </html>`;
  }

package.json

包括苗条：

    "rollup": "^2.35.1",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.31.2",
    "svelte-check": "^1.1.24",
    "svelte-preprocess": "^4.6.1",

    "rollup": "^2.35.1",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.31.2",
    "svelte-check": "^1.1.24",
    "svelte-preprocess": "^4.6.1",