Language-tools: svelte (css-syntax-error) saat menggunakan media kustom postcss-preset-env

Dibuat pada 2 Sep 2020  ·  8Komentar  ·  Sumber: sveltejs/language-tools

Untuk Mereproduksi
Anda dapat menggunakan repo saya untuk mereproduksinya https://github.com/shamsartem/dbudget
Periksa default.svelte untuk kesalahan.

Kalau tidak:

  1. Tambahkan plugin postcss-preset-env ke rollup.config.js dan ke postcss.config.js dengan setelan {stage: 0}
  2. Tambahkan misalnya @ custom-media --t (width> = 768px); di App.svelte dalam tag gaya dengan lang = "postcss"
  3. Coba gunakan @media (--t) di App.svelte - seharusnya berfungsi dan tidak ada kesalahan yang terlihat
  4. Coba gunakan @media (--t) di beberapa komponen lain - ini menunjukkan kesalahan tetapi dibangun dan berfungsi dengan benar

Perilaku yang diharapkan
Seharusnya tidak ada kesalahan dalam kasus ini

Sistem (lengkapi informasi berikut):

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

Komentar yang paling membantu

Saya menemukan solusi (harap saya tidak langsung menyimpulkan terlalu cepat lagi 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,
    },
  }),
}

Tentang build, saya kira itu karena Anda mendeklarasikan custom-media di app.svelte Anda. Setelah saya menghapusnya dan memulai ulang server dev, kesalahan yang sama yang Anda temui di IDE muncul.
Mungkin Anda bisa mengimpor media-queries saat Anda ingin menggunakannya, atau membuatnya tersedia secara global.

Semua 8 komentar

Duplikat dari # 305

Kami tidak memiliki rencana untuk mendukung validasi postcs atau css selanjutnya. Itu terlalu banyak pekerjaan pemeliharaan. Anda dapat merujuk ke dokumen ini untuk instruksi pengaturan

Untuk kasus khusus Anda: File Svelte ditranspilasi per file, jadi ia tidak tahu apa-apa tentang --t di dalam komponen jika Anda tidak mendefinisikannya di sana. Saya pikir ini berfungsi untuk build Anda karena semuanya digabungkan ke satu css besar pada akhirnya.

Terima kasih banyak atas tanggapannya. Saya sangat menghargai usaha Anda dalam hal ini

Saya memutuskan untuk memposting tentang ini hanya karena sebelumnya selama beberapa minggu saya telah menggunakan kueri media khusus tersebut dan tidak ada kesalahan tetapi setelah beberapa pembaruan (saya kira) sekarang ada satu. Juga ini bisa menjadi bagian dari spesifikasi css di masa depan, siapa tahu. Saya harap ini setidaknya akan diperbaiki. Terima kasih

Entah bagaimana, Anda perlu membuat media khusus dari media-queries.css juga tersedia dari praproses svelte-config.js .

Jika saya mencoba kode persis seperti yang Anda posting ini menghasilkan kesalahan baru
"postcssPresetEnv bukanlah sebuah fungsi". Bahkan jika saya menghapus .default, saya masih melihat
sebuah kesalahan. Terima kasih banyak telah melihat ini.

Pada Jum, 4 Sep 2020 pukul 09:37, Lyu, Wei-Da [email protected] menulis:

masalah yang Anda alami adalah pengaturan preprocessor di svelte.config.js.
Anda memiliki tiga plugin yang dimuat di konfigurasi rollup Anda. tetapi hanya mengaktifkan otomatis
preprocessing di svelte.config.js sehingga proses kompilasi IDE tidak didapat
gaya preprocessed sehingga membuang kesalahan.

Saya mencoba ini di svelte.config.js dan kesalahannya hilang.

const sveltePreprocess = membutuhkan ('svelte-preprocess') const postcssImport = membutuhkan ('postcss-import') const postcssPresetEnv = membutuhkan ('postcss-preset-env']. defaultconst postcssNested = membutuhkan ('postcss-nested')
const postcssPlugins = [
postcssImport (),
postcssPresetEnv ({stage: 0}),
postcssNested (),]
module.exports = {
preprocess: sveltePreprocess ({
sourceMap: benar,
kiriman: {
plugin: postcssPlugins,
},
})}

-
Anda menerima ini karena Anda yang mengarang utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Maaf untuk itu saya menemukan itu tidak berfungsi XD

Saya menemukan solusi (harap saya tidak langsung menyimpulkan terlalu cepat lagi 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,
    },
  }),
}

Tentang build, saya kira itu karena Anda mendeklarasikan custom-media di app.svelte Anda. Setelah saya menghapusnya dan memulai ulang server dev, kesalahan yang sama yang Anda temui di IDE muncul.
Mungkin Anda bisa mengimpor media-queries saat Anda ingin menggunakannya, atau membuatnya tersedia secara global.

@ jasonlyu123 Anda luar biasa! Anda menyelesaikan kedua masalah sekaligus (memiliki kueri media di dua tempat juga tidak bagus). Saya sangat menghargai ini, sekarang saya bisa bekerja dengan senang hati. Terima kasih sekali lagi dan semoga berhasil dalam segala hal!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat