Chrome에서 Less.js가 응답하지 않음

Chrome에서는 응답하지 않는 동안 Firefox에서는 Less.js 기능이 응답하지 않아 우려가 제기되었습니다. 원인을 확인하기 위해 제공된 코드를 살펴보겠습니다.

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

코드는 유효한 CSS 전처리기 구문으로 Less.js를 구현하는 것으로 보입니다. 그러나 원인은 사용된 환경과 설정에 있습니다. 제공된 문서에 따르면:

Chrome의 Less.js 브라우저 스크립트 제한 사항

"Less.js 브라우저 스크립트는 현재 Chrome을 사용하는 경우 작동하지 않으며 페이지 경로가 'file:///…'으로 시작합니다. 이는 알려진 Chrome 문제 때문입니다."

이는 파일이 아닌 로컬 파일을 사용할 때 Less.js가 Chrome에서 작동하지 않을 수 있음을 의미합니다. 웹 서버.

해결책

문제를 해결하려면 다음을 시도하십시오.

• 웹 서버를 사용하여 파일 제공: 파일을 웹 서버에 업로드하고 URL(예: http://example.com/style.less)을 사용하여 액세스합니다.
• 로컬 호스트 설정 사용: 실행 로컬 개발 서버(예: PHP의 내장 서버, Python의 SimpleHTTPServer)를 사용하고 http://localhost:8000/style.less.
• 다음과 같은 주소를 통해 파일에 액세스합니다. 개발 중에 Less 파일을 컴파일하려면 grunt 또는 gulp와 같은 Less.js 처리 도구를 사용하여 Chrome과의 호환성을 보장하세요.