Tailwind JIT not updating styles when using styleUrls

Ouverte
#24,469 6 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
angular, tailwindcss, typescript
Domaine
build-system, frontend

Piste de recherche

Commencez par la reproduction minimale liée : exécutez yarn, puis yarn start, et modifiez app.component.html tandis que tailwind.css est répertorié séparément dans styleUrls. Observez le style d’arrière-plan généré avant et après le redémarrage du processus serve. C’est terminé lorsqu’une modification d’une classe Tailwind auparavant inutilisée met à jour les styles servis sans redémarrage.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area: @ngtools/webpack freq1: low severity3: broken type: bug/fix
Command

serve

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

When using styleUrls to specify the path to the tailwind css entrypoint file separately, the JIT will not detect changes properly.

To clarify:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../tailwind.css'] // notice tailwind is separated here
})

Now if I try to use any class that is not already used in the HTML, the changes will not propagate properly. Only killing ng serve and restarting it will work.

I have attached a simple repro.

Minimal Reproduction

Repro at:

https://github.com/andreialecu/angular-tw-jit-repro

Run

yarn
yarn start

Open http://localhost:4200/ in the browser.

Then go into app.component.html and try to change bg-green-200 to bg-red-200, you will see that the background disappears because bg-red-200 does not exist.

If you ctrl+c then run yarn start again, the background will update.

Exception or Error

No response

Your Environment
Angular CLI: 13.3.10
Node: 16.14.2
Package Manager: yarn 1.22.19
OS: darwin arm64

Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.10
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.3.10
@angular-devkit/schematics      13.3.10
@angular/cli                    13.3.10
@schematics/angular             13.3.10
rxjs                            7.5.7
typescript                      4.6.4
Anything else relevant?

Possibly related:

https://github.com/angular/angular-cli/issues/21749
https://stackoverflow.com/a/73446036

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
16 h 35 min
PR mergées (30 j)
176

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.