동적으로 LESS 규칙 로드 기존 제한 사항 처음에는 LESS 스타일시트를 로드해야 합니다. less.js 스크립트 앞에. 이는 스크립트가 렌더링 전에 LESS 스타일을 구문 분석하고 해석하기 때문입니다. 이 순서를 바꾸면 스타일 해석이 불가능해집니다. 동적 로딩 솔루션 less.js 버전 1.0.31에는 less.refreshStyles() 메서드가 도입되었습니다. 이 방법은 type="text/less" 속성이 있는 태그.</p> <p><strong>사용 예</strong></p> <p>페이지 로드 후 LESS 규칙을 동적으로 로드하려면 다음 단계를 따르세요.</p> <ol> <li>less.js 스크립트를 포함하세요.</li> <li>동적으로 로드하려는 LESS 스타일시트가 <style> type="text/less" 속성이 있는 태그.</li> <li>less.refreshStyles() 메서드를 호출하여 LESS 규칙을 컴파일합니다.</li> </ol> <p><strong>업데이트된 테스트 사례</strong> </p> <p>다음 업데이트된 코드 예제는 동적 로드 프로세스를 보여줍니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script> <link rel="stylesheet/less" href="/static/less/dynamic.less" id="abc123"/> <script> console.log("refreshing styles..."); less.refreshStyles(); console.log("refreshed..."); </script></code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>LESS 스타일시트</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="less">@primary_color: green; #container { background: @primary_color; border-radius: 5px; div { color: red; } }</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p>less.refreshStyles( ) 메소드, <style> ID가 "abc123"인 태그가 동적으로 컴파일되어 페이지에 적용됩니다.</p>
