Less.js: less.render는 nodejs의 다른 디렉토리에 있는 @import 파일과 함께 작동하지 않습니다.

나는 LESS를 사용하여 내 애플리케이션에서 테마를 구현하고 nodejs보다 적은 모듈을 사용하여 CSS에 더 적은 파일을 컴파일하지만 특정 시나리오에서는 작동하지 않습니다.

또한 내 응용 프로그램에 Bootstrap을 사용하고 있으며 Bootstrap이 적은 소스 코드를 사용하여 내 응용 프로그램에서 원하는 CSS만 컴파일하고 있습니다.

다양한 테마에서 부트스트랩 변수와 믹스인을 재정의할 수도 있습니다. 따라서 Bootstrap을 컴파일하는 동안 특정 테마 변수와 믹스인도 고려해야 합니다.

따라서 부트스트랩 변수/믹스인과 CSS 규칙을 구별하여 2개의 다른 파일을 만들었습니다.

• application_variables.less - 필요한 모든 부트스트랩 변수 및 믹스인을 포함합니다.
• application.less - 필요한 모든 부트스트랩 CSS 규칙이 포함되어 있습니다.

애플리케이션의 디렉토리 구조

|--sample_application
    |--resources
    |   |--libraries
    |      |--bootstrap
    |           |--css
    |           |   |--application.less
    |           |--less
    |           |   |--application_variables.less    
    |--themes
        |--red
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--red.less    
        |--blue
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--blue.less    
        |--themes.less

어떤 파일이 무엇을 포함하는지에 대한 설명은 무엇입니까?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
이 파일에는 모든 응용 프로그램별 믹스인과 재정의된 부트스트랩 믹스인이 포함되어 있습니다.

.my-hover-mixin(@color) {
   &:hover {
       border: 2px solid @color;
    }
}
/*Other theme specific mixins*/

2. /sample_application/themes/<-theme_name->/variables/variables.less
이 파일에는 모든 응용 프로그램별 변수와 재정의된 부트스트랩 변수가 포함되어 있습니다.

@text-color:#333333;
@border-color:#999999;
@body-bg-color:red;
/*Other theme specific variables*/

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
이 파일에는 특정 테마에 대한 믹스인 및 변수의 파일 가져오기가 포함되어 있습니다.

<strong i="10">@import</strong> "./variables/variables.less";
<strong i="11">@import</strong> "./mixins/mixins.less";

4. /sample_application/themes/theme.less
이 파일에는 두 개의 파일 가져오기가 포함되어 있습니다. 첫 번째는 application_variables.less인 부트스트랩 변수에 대한 것이고 두 번째는 특정 테마의 기본 파일 가져오기를 위한 것입니다. red.less/blue.less

<strong i="17">@import</strong> "application_variables.less";
<strong i="18">@import</strong> "red/red.less";

5. /sample_application/resources/libraries/bootstrap/css/application.less
이 파일에는 /themes/themes.less 및 모든 필수 부트스트랩 CSS 규칙인 파일 가져오기가 포함되어 있습니다.

<strong i="24">@import</strong> "theme.less";
/*Bootstrap CSS rules*/

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
이 파일에는 필요한 모든 부트스트랩 변수와 믹스인이 포함되어 있습니다.

/*Bootstrap variables and mixins*/

이제 compile-bootstrap.js인 부트 스트랩을 덜 컴파일하는 하나의 노드 스크립트 파일이 있습니다.

var fs = require("fs");
var less = require('less');

(function() {
    var bsLessContent = fs.readFileSync("sample_application/resources/libraries/bootstrap/css/application.less");
    less.render(bsLessContent.toString(), {
        paths : [ "sample_application/themes/", "sample_application/resources/libraries/bootstrap/less/"],
        compress : true
    }, function(e, output) {
        fs.writeFileSync("sample_application/resources/libraries/bootstrap/css/application.css", output);
    });
})();

그러나이 스크립트를 실행할 때 다음 오류가 발생합니다.

{ [Error: 'application_variables.less' wasn't found]
   type: 'File',
   message: '\'application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="6">@import</strong> "application_variables.less";',
      '<strong i="7">@import</strong> "red/red.less";' ] }

그런 다음 상대 경로도 사용해 보았지만 여전히 동일한 오류가 발생했습니다.

{ [Error: './../resources/libraries/bootstrap/less/application_variables.less' wasn't found]
   type: 'File',
   message: '\'./../resources/libraries/bootstrap/less/application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="11">@import</strong> "./../resources/libraries/bootstrap/less/application_variables.less";',
      '<strong i="12">@import</strong> "red/red.less";' ] }