동적으로 less.js 규칙 로드 less.js를 사용할 때 페이지 로드 후 스타일을 동적으로 로드하면 모든 LESS 스타일시트가 필요하므로 문제가 발생합니다. less.js 스크립트보다 먼저 로드됩니다. 이 문제를 해결하기 위해 less.js 버전 1.0.31에서는 less.refreshStyles() 메서드를 도입했습니다. 이 방법을 사용하면 type="text/less"를 동적으로 사용하는 태그입니다. 사용 방법은 다음과 같습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script> less.sheets.push(document.getElementById('abc123')); less.refreshStyles(); </script></code></pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 코드는 ID가 'abc123'인 스타일시트를 검색하여 동적으로 컴파일합니다. less.js 스크립트가 로드된 후 페이지에 이 코드를 추가하여 LESS 스타일시트를 동적으로 로드할 수 있습니다.</p> <p><strong>예</strong></p> <p>다음 테스트 코드를 고려하세요.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><!-- Style sheet after less.js script --> <script src="/static/js/less-1.0.31.min.js"></script> <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/></code></pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">console.log("refreshing styles..."); less.sheets.push(document.getElementById('abc123')); less.refreshStyles(true); console.log("refreshed...");</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 예에서는 less.js 스크립트 다음에 스타일시트가 로드됩니다. less.sheets.push() 메서드는 less.js가 관리하는 스타일시트 배열에 스타일시트를 추가합니다. 그런 다음 less.refreshStyles()가 호출되어 스타일시트를 동적으로 다시 컴파일합니다.</p>
