Less.js 규칙을 동적으로 로드

Less.js를 웹사이트에 통합하면 웹사이트의 스타일 기능이 향상될 수 있습니다. 그러나 한 가지 제한 사항은 Less.js 스크립트 전에 모든 LESS 스타일시트를 로드해야 한다는 것입니다. 이는 초기 페이지 로드 후 특정 스타일을 동적으로 로드해야 할 때 문제가 될 수 있습니다.

현재 제한 사항

현재 Less.js에서는 외부 로드 순서를 지정합니다. 스타일시트와 스크립트는 중요한 역할을 합니다. 아래와 같이 순서를 반대로 하면 Firefox와 Chrome 모두에서 style.less 파일을 로드하지 못합니다.

Less.js v1.0.31의 솔루션

이 제한 사항을 해결하기 위해 Less.js 버전 1.0.31에서는 less.refreshStyles()라는 메서드를 도입했습니다. 이 방법을 사용하면 "type='text/less'" 속성을 사용하여

동적 로딩 구현

Less의 동적 로딩을 구현합니다. Node.js 규칙을 사용하려면 다음 단계를 따르세요.

1. Less.js 버전 1.0.31 이상을 사용하고 있는지 확인하세요.
2. "type='text/에
4. less.refreshStyles()를 호출하여 새로운 규칙.

예:

자바스크립트:

less.refreshStyles();