Блог

Главная - Вопросы по программированию - Как включить скомпилированный стиль Svelte при создании расширения vscode?

Как включить скомпилированный стиль Svelte при создании расширения vscode?

#visual-studio-code #svelte

Вопрос:

Я создаю свое первое расширение VSCode. Я создал веб-представление боковой панели с помощью Svelte, и оно работает как мечта, когда я запускаю его локально. Он компилирует мой стройный код в мою out/compiled папку. Затем я создал .vsix файл. Когда я установил его, все команды существуют и работают, но когда я нажимаю значок, чтобы открыть веб-представление, я получаю «404 не удалось загрузить ресурсы sidebar.js и боковая панель.css».. Пути идут в out/compiled путь, но не содержат никакого css или js.. Почему он не компилируется? Я использую vsce package его для создания своего vsix файла. Если это хоть чем-то поможет.

Это мое extension.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>`;
  }

Мне интересно, может быть, мой стройный препроцессор не работает или что-то в этом роде?
Вот мой rollup.config.js :

 import sveltePreprocess from "svelte-preprocess";
import svelte from "rollup-plugin-svelte";

      plugins: [
        svelte({
          // enable run-time checks when not in production
          dev: !production,
          // we'll extract any component CSS out into
          // a separate file - better for performance
          css: (css) => {
            css.write(name   ".css");
          },
          preprocess: sveltePreprocess(),
        }),

Мой 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",
Метки: