Language-tools: svelte (CSS-Syntax-Fehler) bei Verwendung von benutzerdefinierten Postcss-Preset-Env-Medien

Erstellt am 2. Sept. 2020  ·  8Kommentare  ·  Quelle: sveltejs/language-tools

Fortpflanzen
Sie können mein Repo verwenden, um es zu reproduzieren https://github.com/shamsartem/dbudget
Überprüfen Sie default.svelte auf Fehler.

Alternative:

  1. Fügen Sie das Plugin postcss-preset-env zu rollup.config.js und zu postcss.config.js mit der Einstellung {stage: 0} hinzu
  2. Füge zB @ custom-media --t (width> = 768px) hinzu; in App.svelte im Style-Tag mit lang = "postcss"
  3. Versuchen Sie es mit @media (--t) in App.svelte - es sollte funktionieren und es ist kein Fehler sichtbar
  4. Versuchen Sie, @media (--t) in einer anderen Komponente zu verwenden - es zeigt den Fehler an, wird jedoch erstellt und funktioniert ordnungsgemäß

Erwartetes Verhalten
In diesem Fall sollte kein Fehler vorliegen

System (bitte vervollständigen Sie die folgenden Informationen):

  • OS: Manjaro
  • IDE: VSCode
  • Plugin / Paket: "Svelte for VSCode"
question

Hilfreichster Kommentar

Ich habe eine Problemumgehung gefunden (hoffe, ich bin nicht zu schnell wieder zu dem Schluss gekommen, lol)

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess')
const fs = require('fs')
const mediaQueries = fs
  .readFileSync('./src/assets/css/media-queries.css')
  .toString()

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      prependData: mediaQueries,
    },
  }),
}

Ich denke, das liegt daran, dass Sie die benutzerdefinierten Medien in Ihrer app.svelte deklarieren. Sobald ich es entferne und den Entwicklungsserver neu starte, wird derselbe Fehler angezeigt, der in der IDE auftritt.
Möglicherweise können Sie die Medienabfragen importieren, wenn Sie sie verwenden möchten, oder sie global verfügbar machen.

Alle 8 Kommentare

Duplikat von # 305

Wir haben nicht vor, die Validierung von postcss oder css als nächstes zu unterstützen. Das sind zu viele Wartungsarbeiten. Anweisungen zur Einrichtung finden Sie in diesem Dokument

Für Ihren speziellen Fall: Svelte-Dateien werden pro Datei transpiliert, sodass nichts über das --t in der Komponente bekannt ist, wenn Sie es dort nicht definieren. Ich denke, es funktioniert für Ihren Build, weil am Ende alles zu einem großen CSS gebündelt ist.

Vielen Dank für die Antwort. Ich bin sehr dankbar für Ihre Bemühungen

Ich habe mich dazu entschlossen, nur darüber zu posten, weil ich zuvor einige Wochen lang diese benutzerdefinierten Medienabfragen verwendet habe und es keinen Fehler gab, aber nach einigen Updates (ich nehme an) gibt es jetzt einen. Auch dies könnte in Zukunft Teil der CSS-Spezifikation werden, wer weiß. Ich hoffe es wird dann zumindest behoben. Vielen Dank

Sie müssen die benutzerdefinierten Medien aus media-queries.css irgendwie auch aus dem Vorprozess von svelte-config.js verfügbar machen.

Wenn ich genau diesen Code versuche, den Sie gepostet haben, wird ein neuer Fehler generiert
"postcssPresetEnv ist keine Funktion". Selbst wenn ich .default entferne, sehe ich immer noch
ein Fehler. Trotzdem vielen Dank, dass Sie sich das angeschaut haben.

Am Freitag, den 4. September 2020 um 09:37 Uhr schrieb Lyu, Wei-Da [email protected] :

Das Problem, das Sie haben, ist die Einrichtung des Präprozessors in svelte.config.js.
Sie haben drei Plugins in Ihre Rollup-Konfiguration geladen. aber nur auto aktivieren
Vorverarbeitung in svelte.config.js, damit der Kompilierungsprozess der IDE nicht ausgeführt wird
Der vorverarbeitete Stil wirft somit den Fehler auf.

Ich habe dies in der Datei svelte.config.js versucht und der Fehler verschwindet.

const sveltePreprocess = require ('svelte-preprocess') const postcssImport = require ('postcss-import') const postcssPresetEnv = require ('postcss-preset-env'). defaultconst postcssNested = require ('postcss-nested')
const postcssPlugins = [
postcssImport (),
postcssPresetEnv ({stage: 0}),
postcssNested (),]
module.exports = {
Vorprozess: sveltePreprocess ({
sourceMap: true,
postcss: {
Plugins: postcssPlugins,
},
})}

- -
Sie erhalten dies, weil Sie den Thread verfasst haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
oder abbestellen
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Entschuldigung, ich habe festgestellt, dass es XD nicht funktioniert

Ich habe eine Problemumgehung gefunden (hoffe, ich bin nicht zu schnell wieder zu dem Schluss gekommen, lol)

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess')
const fs = require('fs')
const mediaQueries = fs
  .readFileSync('./src/assets/css/media-queries.css')
  .toString()

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      prependData: mediaQueries,
    },
  }),
}

Ich denke, das liegt daran, dass Sie die benutzerdefinierten Medien in Ihrer app.svelte deklarieren. Sobald ich es entferne und den Entwicklungsserver neu starte, wird derselbe Fehler angezeigt, der in der IDE auftritt.
Möglicherweise können Sie die Medienabfragen importieren, wenn Sie sie verwenden möchten, oder sie global verfügbar machen.

@ jasonlyu123 Du bist einfach unglaublich! Sie haben beide Probleme auf einmal gelöst (Medienabfragen an zwei Stellen waren ebenfalls nicht besonders gut). Ich weiß das wirklich zu schätzen, jetzt kann ich gerne arbeiten. Nochmals vielen Dank und viel Glück in allem!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

maximedupre picture maximedupre  ·  5Kommentare

matthewmueller picture matthewmueller  ·  5Kommentare

JAD3N picture JAD3N  ·  5Kommentare

johanbissemattsson picture johanbissemattsson  ·  4Kommentare

PatrickG picture PatrickG  ·  3Kommentare