angular / angular/angular-cli

Tailwind JIT not updating styles when using styleUrls

Đang mở
#24,469 6 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @ngtools/webpack freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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:

```ts
@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

```text
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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện tối thiểu được liên kết: chạy yarn, sau đó chạy yarn start, và chỉnh sửa app.component.html trong khi tailwind.css được liệt kê riêng trong styleUrls. Quan sát style nền được tạo trước và sau khi khởi động lại tiến trình serve. Được xem là hoàn tất khi việc thay đổi một lớp Tailwind trước đó chưa được sử dụng cập nhật các style được phục vụ mà không cần khởi động lại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, tailwindcss, typescript
Lĩnh vực
build-system, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.