Webpack: 일부 CSS 스타일 속성이 적용되지 않거나 실행되지 않습니다.

Question

저는 현재 Twig 및 Tailwind CSS를 사용하여 Symfony 6 프로젝트를 진행하고 있습니다.

이 가이드의 모든 항목을 여기에 설치했습니다. https://tailwindcss.com/docs/guides/symfony

저는 (일부) tailwind CSS 요소를 사용할 수 있었고 Webpack Encore는 PostCSS를 통해 필요한 tailwind 구성을 로드하고 public/build/ 디렉터리에 자산을 구축했습니다.

base.html.twig가 빌드 리소스를 로드합니다

base.html.twig

으아아아

드디어 index.html.twig(base.html.twig를 확장함)에서 사용할 수 있습니다.

으아아아

보시다시피 예시 제목과 이미지에 tailwind 속성을 적용해보았습니다. 그러나 헤더와 관련된 tailwind CSS 속성은 작동하지만 이미지에는 작동하지 않습니다. 브라우저에서 확인해도 해당 속성에 대한 CSS 값이 표시되지 않습니다. 내 이미지를 더 작게 만들고 테두리를 다음과 같이 만들고 싶습니다.

결과는 다음과 같습니다.

Answer 1

문제를 발견했습니다. 실제 이미지의 경로와 관련이 있습니다.

이전에 assets/images/image1.jpg

에 저장됨

저는 나뭇가지 템플릿에 다음과 같이 사용했습니다:

으아아아

이제는 Webpack Encore를 사용합니다 .copyFiles()函数将图像存储在public/build/imagesDownload

webpack.config.js

으아아아

이제 공개 빌드 경로에서 (해시와 관계없이) 해결하면 작동합니다.

으아아아

이것은 일부 비동기 프로세스의 webpack과 관련이 있는 것 같습니다. 질문을 편집하겠습니다.