Cara mengatasi error Unknown at rule @apply scss(unknownAtRules)
pada VSCode (Visual Studio Code).
Explanation
Error ini biasanya muncul apabila kita bekerja dengan VSCode pada saat menggunakan TailwindCSS atau UnoCSS directive @apply
untuk memanggil template class dari file CSS
atau SCSS
.
Sebenarnya ini bukanlah error, tapi linter berusaha memberitahu kita bahwa ada rule yang tidak diketahui atau tidak dimengerti oleh SCSS preprocessor.
Solution
Ada beberapa metode untuk mengatasi masalah ini, diantaranya akan kita bahas pada postingan kali ini.
Add Custom Data for CSS Language Service
Metode berikut ini paling direkomendasikan, karena dengan ini kita memberitahu linter bahwa warning yang muncul memang untuk rule yang sengaja kita tentukan.
Ikuti langkah-langkah berikut untuk menambahkan CSS custom data:
- Buat file dengan nama
css-custom.json
di root project dengan konten sebagai berikut: - Tambahkan object berikut pada file
settings.json
Disable Linter Warning
Metode berikut ini sebenarnya tidak dianjurkan, karena dengan begini kita tidak akan diingatkan oleh linter apabila ada warning yang mungkin berguna. Dengan metode ini kita hanya perlu menambahkan object berikut pada file settings.json
-
Untuk
CSS
"css.lint.unknownAtRules": "ignore"
-
Untuk
SCSS
"scss.lint.unknownAtRules": "ignore"
Where to find settings.json
Untuk melakukan pengaturan VSCode secara terpisah atau per-project:
- Buat folder dengan nama
.vscode
di root project - Buat file dengan nama
settings.json
Untuk melakukan pengaturan VSCode secara global:
- Buka global setting VSCode dengan cara
- Tekan
F1
atauCtrl+Shift+P
atauCmd+Shift+P
- Pilih
Preferences: Open User Setting (JSON)
Reference
Untuk info lebih detail dapat dilihat di github.com/microsoft/vscode-css-languageservice
Top comments (0)