Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Angular+Tailwind: New classes are not added when symlink is present

Đang mở
  • Có gì không ổn?
#623 9 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

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

Hướng nghiên cứu

Tái hiện vấn đề với dự án Angular và các lệnh symlink trong báo cáo, sau đó kiểm tra postcss-loader/src/index.js quanh các dòng 196-198 cũng như cách webpack xử lý ContextDependency được thêm vào. Xác nhận rằng việc thay đổi class Tailwind khi chạy ng serve sẽ làm vô hiệu hóa và biên dịch lại đầu ra được theo dõi 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.

Mô tả

Preamble

Yes, this bug report is very unspecific to webpack and I cannot say what is wrong where, because I don't have the knowledge, but the tailwind developer said the bug could be in webpack and the angular developer said the problem seems to rely in webpack.

My previous issues leading me to webpack:
https://github.com/tailwindlabs/tailwindcss/issues/10555
https://github.com/angular/angular-cli/issues/24705

Information from @thecrypticace (tailwind developer)

  1. On the initial build we are returning the expected content paths from our plugin for postcss-loader to hand off to webpack.
  2. On subsequent builds Tailwind CSS itself isn't called at all by Angular (I'm guessing PostCSS itself isn't called)
  3. This problem is only present when a glob path is passed to postcss-loader AND there is a symlink inside the "root" (non-dynamic) directory of the glob path.
  4. I suspected this was a problem with the persistent cache but disabling the angular cache does not fix this.

He said that he is willing to provide additional information if needed.

Information from @alan-agius4 (angular developer)

This seems to be an issue with Webpack itself.
I can see that the correct dependencies are added by postcss/tailwinds in webpack-contrib/postcss-loader@888d72e/src/index.js#L196-L198. But, for some reason when the added ContextDependency is a directory with a nested symlink, Webpack do not invalidate the correct files.

Bug report

New tailwind classes are not added in ng serve without restarting it, while a symlink exists in tailwinds content path.
This issue can be fixed by removing the symlink. Now class changes are added without restarting ng serve.
It does not matter what file type it is, the existence of a symlink is enough to break it.

Actual Behavior

Changes in files are not reflected in watched output.

Expected Behavior

The dependency should be invalidated and recompiled.

How Do We Reproduce?

setup new angular project:

ng new --minimal --style scss --defaults tailwind-symlink-bug
cd tailwind-symlink-bug/
npm install --save-dev tailwindcss
ln -s ../../node_modules/@angular/core/README.md src/assets/README.md
echo "module.exports = { content: ['./src/**/*.{html,ts}'] };" > tailwind.config.js
echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > src/styles.scss

replace html in app.component.ts with following:

<div class="w-40 h-40 bg-red-500"></div>

start:

ng serve

You will see a red square. Now change bg-red-500 to bg-green-500 -> the square will disappear, as the new tailwind class is not generated. A restart of ng serve will add it.

If you remove the symlink at src/assets/README.md and restart ng serve, the problem above does not appear.

Ngôn ngữ chính
JavaScript
Star
2.8k
Fork
211
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của webpack/postcss-loader

Tất cả issue của webpack/postcss-loader

Issue tương tự

Thêm issue về JavaScript

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.