Configuring LSP to recognize TailwindCSS @apply directives in Vue scoped SCSS with LazyVim

Question

I'm using LazyVim in a Vue project. In <style lang="scss" scoped> blocks, I keep getting an "Unknown at rule @apply" error for TailwindCSS @apply directives.

LSP configs active in this buffer (I found this via the Lspinfo command): (vtsls, tailwindcss, volar)

I've tried setting css.lint.unknownAtRules = "ignore" but still seeing the issue. Is there a way to configure an LSP to recognize @apply in these scoped SCSS blocks?

Any help would be appreciated!

Answer 1

I found the solution! Turns out I actually needed to update the volar LSP instead of cssls.

return {
  {
    "neovim/nvim-lspconfig",
    opts = {
      servers = {
        volar = {
          settings = {
            css = {
              validate = true,
              lint = {
                unknownAtRules = "ignore",
              },
            },
            scss = {
              validate = true,
              lint = {
                unknownAtRules = "ignore",
              },
            },
            less = {
              validate = true,
              lint = {
                unknownAtRules = "ignore",
              },
            },
          },
        },
      },
    },
  },
}