2
votes

Composant de fichier unique Tailwind CSS + VueJS et intégration de VS Code

Comment configurer correctement Tailwind CSS et VS Code pour au moins désactiver les erreurs sur at-rule et l'erreur de balise vide dans le composant de fichier unique VueJS (vue-cli)?

<template>
...
</template>

<style lang="scss">
  body {
    // } expected
    @apply font-source pt-4;
  } // at-rule or selector expected

  h5,h4,h3,h2,h1 {
    // } expected
    @apply font-pt font-bold;
  } // at-rule or selector expected
</style>

css vue.js tailwind-css

3 commentaires

désactiver le es-lint si cela fonctionne

lol je ne veux pas désactiver les peluches es-lint.

puis gardez es-lint

3 Réponses :

0
votes

peut-être supprimer lang = "scss" ou utiliser la classe directement dans le modèle devrait fonctionner?

0 commentaires

-1
votes

Pensez à utiliser postcss comme langage CSS au lieu de SCSS. Ajoutez postcss en tant que lang comme ceci:

<style lang="postcss">
// styles...
</style>

0 commentaires

3
votes

Je l'ai fait fonctionner avec l'aide de ceci guide

TLDR

Installez le plugin VS Code stylelint (nom de l'éditeur: stylelint)
Désactivez la validation scss / css pour le projet. Appuyez sur F1 et recherchez "settings json".

settings.json

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

Ajoutez et configurez le plugin stylelint. Ajoutez le fichier et le contenu suivants à la racine de votre projet.

stylelint.config.js

"scss.validate": false
"css.validate": false

(facultatif) Il se peut que vous deviez "peut" redémarrer vs code pour voir les modifications

0 commentaires