Language-tools: svelte (css-syntax-error) при использовании пользовательского носителя postcss-preset-env

Созданный на 2 сент. 2020  ·  8Комментарии  ·  Источник: sveltejs/language-tools

Воспроизводить
Вы можете использовать мое репо, чтобы воспроизвести его https://github.com/shamsartem/dbudget
Проверьте default.svelte на наличие ошибок.

Альтернативно:

  1. Добавьте плагин postcss-preset-env в rollup.config.js и postcss.config.js с настройкой {stage: 0}
  2. Добавьте, например, @ custom-media --t (width> = 768px); в App.svelte внутри тега стиля с lang = "postcss"
  3. Попробуйте использовать @media (--t) в App.svelte - он должен работать, и ошибки не видно
  4. Попробуйте использовать @media (--t) в каком-либо другом компоненте - он показывает ошибку, но строится и работает правильно

Ожидаемое поведение
В этом случае не должно быть ошибки

Система (пожалуйста, заполните следующую информацию):

  • ОС: Манджаро
  • IDE: VSCode
  • Плагин / Пакет: «Svelte для VSCode»
question

Самый полезный комментарий

Я нашел обходной путь (надеюсь, я снова не слишком быстро пришел к выводу, лол)

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

Что касается сборки, я думаю, это потому, что вы объявляете custom-media в своем app.svelte. Как только я удалю его и перезапускаю сервер разработки, появляется та же ошибка, с которой вы сталкиваетесь в среде IDE.
Может быть, вы можете импортировать медиа-запросы, когда захотите их использовать, или сделать их глобально доступными.

Все 8 Комментарий

Дубликат № 305

У нас нет плана по поддержке валидации postcss или css в следующий раз. Слишком много работ по техническому обслуживанию. Вы можете обратиться к этому документу для получения инструкций по установке.

Для вашего конкретного случая: файлы Svelte передаются для каждого файла, поэтому он ничего не знает об этом --t внутри компонента, если вы не определяете его там. Я думаю, что это работает для вашей сборки, потому что в конечном итоге все связано с одним большим CSS.

Большое спасибо за ответ. Я очень ценю твои усилия в этом направлении

Я решил опубликовать об этом только потому, что раньше в течение нескольких недель я использовал эти настраиваемые медиа-запросы и не было ошибок, но после некоторого обновления (я полагаю) теперь оно есть. Также это может стать частью спецификации css в будущем, кто знает. Надеюсь, тогда хоть что-нибудь исправят. Спасибо

Вам нужно каким-то образом сделать custom-media из media-query.css также доступной из препроцесса svelte-config.js .

Если я попробую именно этот код, который вы опубликовали, он сгенерирует новую ошибку
«postcssPresetEnv не является функцией». Даже если я удалю .default, я все равно вижу
ошибка. Тем не менее, большое спасибо за то, что взглянули на это.

Пт, 4 сен 2020 в 09:37, Лю, Вэй-Да [email protected] написала:

проблема, с которой вы столкнулись, - это установка препроцессора в svelte.config.js.
У вас есть три плагина, загруженных в вашу конфигурацию накопительного пакета. но включить только авто
предварительная обработка svelte.config.js, поэтому процесс компиляции IDE не получает
препроцессированный стиль, таким образом, вызывает ошибку.

Я пробовал это в svelte.config.js, и ошибка исчезла.

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 ({этап: 0}),
postcssNested (),]
module.exports = {
препроцесс: sveltePreprocess ({
sourceMap: true,
postcss: {
плагины: postcssPlugins,
},
})}

-
Вы получаете это, потому что вы являетесь автором темы.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
или отказаться от подписки
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Извините, я обнаружил, что это не работает XD

Я нашел обходной путь (надеюсь, я снова не слишком быстро пришел к выводу, лол)

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

Что касается сборки, я думаю, это потому, что вы объявляете custom-media в своем app.svelte. Как только я удалю его и перезапускаю сервер разработки, появляется та же ошибка, с которой вы сталкиваетесь в среде IDE.
Может быть, вы можете импортировать медиа-запросы, когда захотите их использовать, или сделать их глобально доступными.

@ jasonlyu123 Ты просто потрясающий! Вы решили обе проблемы за один раз (наличие медиа-запросов в двух местах тоже было не лучшим решением). Я очень ценю это, теперь могу работать с удовольствием. Еще раз спасибо и удачи во всем!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги