각도 CLI - CSS 또는 SCSS에서 URL을 확인하는 방법은 무엇입니까?

Question

SCSS가 동일한 구성 요소 폴더의 이미지를 참조하는 구성 요소가 background-image: url('./logo.jpg')입니다.

선행 ./을 제거해도 도움이되지 않습니다. 어쨌든 이미지는 브라우저에 표시되지 않습니다.

ng serve을 실행 중이고 dist 폴더를보고있는 경우, logo.jpg는 실제로 복사되어 예상되는 것과 동일한 구성 요소 폴더에 배치됩니다.

내 .css 또는 .scss 파일이 살고있는 폴더 외부의 다른 위치에서 이미지를 참조 할 수 있고 .ts 파일의 .html 및 .css와 같은 상대 경로를 사용하고 싶습니다. .

출력 된 .css 파일의 전체 URL을 생성하는 URL 확인 프로그램이 필요하다고 생각합니다. 어떻게 이러한 resolver를 얻을 수 있습니까? Angular CLI에서 어떻게 구성합니까?

Answer 1

비슷한 현상이 나타났습니다.

Assets 폴더 아래의 CSS에서 참조되는 이미지는 추출되고 guid가 주어 지지만 구성 요소 수준 CSS에는 적용되지 않습니다. 나는 (각도-cli.json에서 그것을 참조하지 않고) 에셋 폴더에 이미지 파일을 복사 결국

다음 내가 함께 구성 요소의 CSS에서이를 참조 할 수 있었다 :

배경 : 홈페이지 (자산 /img/bgs/footer.png);

Answer 2

같은 문제가있었습니다. Less/Sass 파일의 경로를 url(/assets/path_to_img)으로 변경하면 문제가 해결되며 제대로 작동합니다. 처음에는 "/"을 잊지 말고 이미지를 assets 폴더에 저장하십시오.

Answer 3

이 배경 이미지를 사용해보세요. url ("./ ~/assets/images/artist-bg.jpg");