Unknown at rule @apply scss(unknownAtRules)

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:

1. Buat file dengan nama css-custom.json di root project dengan konten sebagai berikut:

   	{
   	"version": 1.1,
   	"atDirectives": [
   	{
   	"name": "@apply",
   	"description": "apply unocss or tailwindcss template classes"
   	}
   	]
   	}

   view raw css-custom.json hosted with ❤ by GitHub
2. Tambahkan object berikut pada file settings.json

   	{
   	"css.customData": ["./css-custom.json"]
   	}

   view raw settings.json hosted with ❤ by GitHub

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

1. Untuk CSS
   

   "css.lint.unknownAtRules": "ignore"
   

2. Untuk SCSS
   

   "scss.lint.unknownAtRules": "ignore"
   

Where to find settings.json

Untuk melakukan pengaturan VSCode secara terpisah atau per-project:

1. Buat folder dengan nama .vscode di root project
2. Buat file dengan nama settings.json

Untuk melakukan pengaturan VSCode secara global:

1. Buka global setting VSCode dengan cara
2. Tekan F1 atau Ctrl+Shift+P atau Cmd+Shift+P
3. Pilih Preferences: Open User Setting (JSON)

Reference

Untuk info lebih detail dapat dilihat di github.com/microsoft/vscode-css-languageservice