CSS이는 Processwire CMS와 관련된 문제이다 Processwire

Question

에 업데이트되지 않지만, 실제로 나는 문제가 정확히 난 그냥 내 첫 번째 Processwire 프로젝트를 시작했습니다

에서 올 수 있으며 설정 한 경우 확실하지 해요 나의 마음에 드는 것까지 백 엔드. 내 사이트의 프런트 엔드를 시작할 때 매우 이상한 문제가 발생했습니다 : CSS 파일이 업데이트되지 않습니다. 나는 곧 문제가 발생하기 시작했다. 그런 다음 main.css의 내용을 새로운 main2.css 파일에 복사하고 템플릿 파일의 코드를 변경 한 다음 다시 작동했습니다. 그것이 내가 계속했던 1 개의 시간 물건이었다라고 생각하면서, 그러나 문제가 다시 일어나기를 오랫동안 생각하지 않았다. 로컬로 파일이 변경되고 프로젝트의 html 코드가 정상적으로 업데이트되지만 페이지를 검사 할 때 CSS 파일의 변경 사항을 볼 수 없습니다.

MAMP를 사용하여 SASS 코드를 컴파일하기위한 로컬 서버와 코알라를 만듭니다. 나는 processwire를 처음 사용하고 아직 웹 개발자 경력의 초창기이지만 문제는 CSS 나 HTML (또는 PHP) 파일에서 부분적으로 만 발생하기 때문에 어떤 일이 일어나고 있는지 혼란 스럽다.

누구에게 어떤 문제가있을 수 있습니까?

미리 감사드립니다.

Answer 1

이것은 주로 캐싱에 문제가 있습니다. 예를 들어 https://varvy.com/pagespeed/leverage-browser-caching.html을 읽어 브라우저 캐싱이 무엇이며 어떤 작업을 수행하는지 이해하십시오.

이 페이지의 "일반적인 캐싱 문제"에서 문제를 찾을 수 있습니다.

Chrome을 사용하는 경우 개발 도구 (F12)를 열고 네트워크 탭에서 "캐시 사용 중지"를 선택하십시오.

Firefox에서 Firefox 도구 상자 (F12 키)를 열고 설정> 고급 설정에서 "도구 상자가 열려 있으면 HTTP 캐시 사용 안 함"(독일어 Firefox에서 번역 됨)을 선택하십시오.

그런 다음 CSS 파일을 변경하고 페이지를 다시로드하십시오. 변경 사항이 나타나면 브라우저 캐싱 중 하나의 함정에 빠져 있음을 알 수 있습니다.

"문제"를 해결할 수있는 전략이 많이 있습니다. 몇 가지 솔루션을 보려면 https://css-tricks.com/strategies-for-cache-busting-css/을보십시오.

Answer 2

내 _init.php에 약간의 PHP 코드를 사용하여 CSS 파일 이름에 버전 번호를 추가하고 있습니다.

요즘 대부분의 브라우저에는 다른 검색어 문자열을 가진 URL이 다른 파일로 표시되어 새로운 사본이 다운로드됩니다. 대부분의 CDN은이를 지원하고 권장합니다. 여기에 더 많은 : 내 ProcessWire 템플릿의 모든이를 사용하고

// In your template file 
<link rel="stylesheet" href="<?php echo $css_with_version; ?>" /> 
// This will output to something like this 
<link rel="stylesheet" href="/site/templates/your-folder/app.css?v101525" /> 

그 템플릿에

// Set path and url 
$assets_path = $config->paths->templates . "your-folder/"; 
$assets_url = $config->urls->templates . "your-folder/"; 
$file_css = "app.css"; 

// Generate css version addon 
// Check if file exists and get date of last change 
if (file_exists($assets_path . $file_css)) { 
    $css_version_addon = "?v" . date("His", filemtime($assets_path . 
    $file_css)); // Time of last change 23h 59m 59s in format 235959 
} else { 
    $css_version_addon = "?somethingWentWrong"; 
} 

// Full url with css file and version addon 
$css_with_version = $assets_url . $file_css . $css_version_addon; 

당신은 출력 할 수 있습니다 여기 css-tricks.com

그리고는 PHP입니다. @jmartsch 언급했듯이, 많은 전략이 있지만,이 하나가 내게 잘 어울립니다. 파일을 생성하는 방법은 중요하지 않습니다. CSS를 생성하기 위해 덤프와 함께 scss를 사용하고 있습니다. 스크립트가 파일이 수정되었는지 확인하고 변경 시간을 출력합니다.