Language-tools: svelte (css-syntax-error) cuando se utilizan medios personalizados postcss-preset-env

Duplicado de # 305

No tenemos un plan para respaldar la validación de postcss o css a continuación. Eso es demasiado trabajo de mantenimiento. Puede consultar este documento para obtener instrucciones de configuración

Para su caso específico: los archivos Svelte se transpilan por archivo, por lo que no sabe nada sobre ese --t dentro del componente si no lo define allí. Creo que funciona para tu compilación porque todo está empaquetado en un gran CSS al final.

Muchas gracias por la respuesta. Realmente aprecio tu esfuerzo en esto

Decidí publicar sobre esto solo porque anteriormente, durante un par de semanas, había estado usando esas consultas de medios personalizadas y no había ningún error, pero después de alguna actualización (supongo) ahora hay una. Además, esto podría convertirse en parte de las especificaciones de CSS en el futuro, quién sabe. Espero que al menos se solucione entonces. Gracias

De alguna manera, debe hacer que los medios personalizados de media-queries.css también estén disponibles desde el preproceso de svelte-config.js .

Si pruebo este código exacto que publicaste, genera un nuevo error
"postcssPresetEnv no es una función". Incluso si elimino .default todavía veo
un error. Aún así, muchas gracias por echarle un vistazo a esto.

El viernes 4 de septiembre de 2020 a las 09:37, Lyu, Wei-Da [email protected] escribió:

el problema que tiene es la configuración del preprocesador en svelte.config.js.
Tiene tres complementos cargados en su configuración acumulada. pero solo habilita auto
preprocesamiento en svelte.config.js para que el proceso de compilación del IDE no obtenga
el estilo preprocesado arroja así el error.

Intenté esto en svelte.config.js y el error desaparece.

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 ({etapa: 0}),
postcssNested (),]
module.exports = {
preproceso: sveltePreprocess ({
sourceMap: verdadero,
postcss: {
complementos: postcssPlugins,
},
})}

-
Estás recibiendo esto porque eres el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Perdón por eso, encontré que no funciona XD

Encontré una solución (espero no haber llegado a la conclusión demasiado rápido otra vez jajaja)

// 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,
    },
  }),
}

Acerca de la compilación, supongo que es porque declaras los medios personalizados en tu app.svelte. Una vez que lo elimino y reinicio el servidor de desarrollo, aparece el mismo error que encuentra en el IDE.
Tal vez pueda importar las consultas de medios cuando desee usarlas o hacer que estén disponibles a nivel mundial.

@ jasonlyu123 ¡ Eres increíble! Resolvió ambos problemas de una vez (tener consultas de medios en dos lugares tampoco fue bueno). Realmente aprecio esto, ahora puedo trabajar con mucho gusto. ¡Gracias de nuevo y mucha suerte en todo!