Language-tools: svelte (erreur de syntaxe css) lors de l'utilisation d'un média personnalisé postcss-preset-env

Créé le 2 sept. 2020  ·  8Commentaires  ·  Source: sveltejs/language-tools

Reproduire
Vous pouvez utiliser mon repo pour le reproduire https://github.com/shamsartem/dbudget
Vérifiez default.svelte pour les erreurs.

Alternativement:

  1. Ajoutez le plug-in postcss-preset-env à rollup.config.js et à postcss.config.js avec le paramètre {stage: 0}
  2. Ajoutez par exemple @ custom-media --t (largeur> = 768px); dans App.svelte à l'intérieur de la balise de style avec lang = "postcss"
  3. Essayez d'utiliser @media (--t) dans App.svelte - cela devrait fonctionner et aucune erreur n'est visible
  4. Essayez d'utiliser @media (--t) dans un autre composant - il affiche l'erreur mais se construit et fonctionne correctement

Comportement prévisible
Il ne devrait pas y avoir d'erreur dans ce cas

Système (veuillez compléter les informations suivantes):

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

Commentaire le plus utile

J'ai trouvé une solution de contournement (j'espère que je n'ai pas encore sauté à la conclusion trop vite 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,
    },
  }),
}

À propos de la construction, je suppose que c'est parce que vous déclarez le média personnalisé dans votre app.svelte. Une fois que je l'ai supprimé et redémarré le serveur de développement, la même erreur que vous rencontrez dans l'EDI apparaît.
Vous pouvez peut-être importer les media-queries lorsque vous souhaitez les utiliser, ou les rendre disponibles dans le monde entier.

Tous les 8 commentaires

Duplicata du n ° 305

Nous n'avons pas de plan pour prendre en charge la validation de postcss ou css ensuite. C'est trop de travaux de maintenance. Vous pouvez vous référer à ce document pour les instructions de configuration

Pour votre cas spécifique: les fichiers Svelte sont transpilés par fichier, donc il ne sait rien de ce --t à l'intérieur du composant si vous ne le définissez pas ici. Je pense que cela fonctionne pour votre build car tout est regroupé dans un gros css à la fin.

Merci beaucoup pour votre réponse. J'apprécie vraiment vos efforts à ce sujet

J'ai décidé de publier à ce sujet uniquement parce qu'auparavant, pendant quelques semaines, j'utilisais ces requêtes multimédias personnalisées et il n'y avait pas d'erreur, mais après une mise à jour (je suppose), il y en a maintenant une. Cela pourrait également faire partie des spécifications css à l'avenir, qui sait. J'espère qu'il sera au moins corrigé alors. Merci

Vous devez en quelque sorte rendre le média personnalisé de media-queries.css également disponible à partir du prétraitement de svelte-config.js .

Si j'essaye ce code exact que vous avez posté, cela génère une nouvelle erreur
"postcssPresetEnv n'est pas une fonction". Même si je supprime .default, je vois toujours
une erreur. Encore merci beaucoup d'avoir jeté un coup d'œil à cela.

Le vendredi 4 septembre 2020 à 09:37, Lyu, Wei-Da [email protected] a écrit:

le problème que vous rencontrez est la configuration du préprocesseur dans svelte.config.js.
Vous avez trois plugins chargés dans votre configuration de cumul. mais n'activer que l'automobile
prétraitement sur svelte.config.js afin que le processus de compilation de l'EDI n'obtienne pas
le style prétraité jetant ainsi l'erreur.

J'ai essayé cela dans le svelte.config.js et l'erreur disparaît.

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 = {
prétraitement: sveltePreprocess ({
sourceMap: vrai,
postcss: {
plugins: postcssPlugins,
},
})}

-
Vous recevez ceci parce que vous avez créé le fil de discussion.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
ou se désinscrire
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Désolé pour cela, j'ai trouvé que cela ne fonctionne pas XD

J'ai trouvé une solution de contournement (j'espère que je n'ai pas encore sauté à la conclusion trop vite 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,
    },
  }),
}

À propos de la construction, je suppose que c'est parce que vous déclarez le média personnalisé dans votre app.svelte. Une fois que je l'ai supprimé et redémarré le serveur de développement, la même erreur que vous rencontrez dans l'EDI apparaît.
Vous pouvez peut-être importer les media-queries lorsque vous souhaitez les utiliser, ou les rendre disponibles dans le monde entier.

@ jasonlyu123 Vous êtes tout simplement incroyable! Vous avez résolu les deux problèmes en une seule fois (avoir des requêtes multimédias à deux endroits n'était pas non plus génial). J'apprécie vraiment cela, maintenant je peux travailler avec plaisir. Merci encore et bonne chance dans tout!

Cette page vous a été utile?
0 / 5 - 0 notes