2014-02-10 2 views
4

저는 웹 앱을 작성 중이며 부트 스트랩의 변수에 대한 일부 CSS @media 쿼리를 연결하려고합니다. 그래서 부트 스트랩을 다운로드하고 자신의 less 파일을 컴파일 할 때 컴파일러가 컴파일하도록 결정했습니다.grunt-contrib-less가 부트 스트랩 변수를 찾지 못하는 이유는 무엇입니까?

내 Gruntfile의 관련 부분이

less: { 
    dev: { 
    options:{ 
     paths: ['app/stylesheets', 'app/stylesheets/bootstrap'], // All the `less` files from bootstrap are placed in 'app/stylesheets/bootstrap' // 
    }, 
    files: { 
     'build/pretty/style.css':'app/stylesheets/**/*.less' 
    } 
    } 
} 

처럼 보인다하지만 꿀꿀 grunt less:dev을 실행할 때 그것은 실패하고 내가 상상할 수있는 모든 방법을 시도했습니다

Running "less:dev" (less) task 
>> NameError: variable @alert-padding is undefined in app/stylesheets/bootstrap/alerts.less on line 10, column 12: 
>> 9 .alert { 
>> 10 padding: @alert-padding; 
>> 11 margin-bottom: @line-height-computed; 
Warning: Error compiling app/stylesheets/bootstrap/alerts.less Use --force to continue. 

Aborted due to warnings. 

출력

답변

1

app/stylesheets 디렉토리의 모든 .less 파일을 컴파일하려고 시도한 다음 build/pretty/style.css으로 연결하기 때문입니다. 그것이 작업이 작동하는 방식입니다.

당신은 아마 이런 식으로 뭔가 함께 더 나은 행운을해야합니다 : 귀하의 작업에서 다음

// app/stylesheets/style.less 
@import "bootstrap/bootstrap.less"; 

// Now you'll have every bootstrap mixin, variable, class, etc available 

:

less: { 
    dev: { 
    files: { 
     'build/pretty/style.css': 'app/stylesheets/style.less' 
    } 
    } 
} 

을 그냥 변수와 유지 mixin을 원하는 경우에, 당신은 대신 @import (reference) "bootstrap/bootstrap.less";을 사용할 수 있습니다. 이렇게하면 부트 스트랩 스타일이 출력되지 않습니다.

+0

덕분에 gustavohenke하지만 지금은이 오류를 얻을 : "dev에 적은"(이하) 작업 >> ParseError : 라인 7에서 응용 프로그램/스타일/style.less에서 인식 할 수없는 입력, 1 열 : >> 6 가 실행 */ >> 7 @import "bootstrap/bootstrap.less" –

+0

@MartinJosefsson 이해가 안됩니다. 당신은 .less 파일을 어딘가에 게시 할 수 있습니까? – gustavohenke

+0

'@ import' 지시어에 같은 "인식 할 수없는 입력"문제가 있습니다. 나는 그것이 덜 유효하다는 것을 안다. 그러나 그것이 왜 잘못되는지 이해하지 못한다. – GTF

관련 문제