Решение проблемы с вложенностью vue tailwind и postcss

Ранее я создал приложение с vue js и tailwind

поскольку я привык использовать функцию вложенности в sass, я хочу использовать ее снова в tailwind

Это довольно просто, мне просто нужно добавить tailwindcss/nesting
в postcss.config.js.

Читать далее

вот мой postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}
Вход в полноэкранный режим Выход из полноэкранного режима

все работало хорошо, пока я не обнаружил, что vscode читает nesting и @apply как ошибку.

После нескольких часов поиска ответа я наконец-то могу сделать вывод.

Сначала мне нужно изменить стиль lang в vue на postcss,

предупреждение об ошибке исчезло, но подсветка синтаксиса не отображается, после прочтения той же проблемы на github https://github.com/johnsoncodehk/volar/issues/765.

и прочитав этот комментарий
https://github.com/johnsoncodehk/volar/issues/765#issuecomment-989442125

я заменил расширение postcss на https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss.

Все готово, предупреждение об ошибке исчезло, а подсветка синтаксиса вернулась.

если у вас такая же проблема и у вас есть другой способ решения, не стесняйтесь, делитесь.

спасибо за чтение

Оцените статью
Procodings.ru
Добавить комментарий