적은 파일을 다른 파일에 덜 가져 왔지만 내용은 포함하지 않습니다.

Question

두 개의 파일이 적습니다. bootstrap.less (부트 스트랩 변수를 포함하는 .. 등)를 import하는 main.less와 대쉬 보드를위한 스타일 만있는 dash.less가 있습니다. 이 두 파일은 두 개의 CSS 파일을 생성해야합니다. main.css 및 dash.css.

모든 내 페이지에 main.css를 포함하고 대시 보드에 dash.css를 포함합니다.

내가 뭘 하려는지 : main.css에 포함 된 부트 스트랩 변수를 사용하여 main.less를 컴파일하십시오. 그런 다음 dash.css에 bootstrap.less 변수를 사용하여 dash.less를 컴파일하십시오. 그러나 이것은 bootstrap.less의 내용이 내 html에 main.css를 이미 포함하고 있기 때문에 원하지 않는 dash.css에 다시 포함될 것입니다.

아무도 이것을 보지 못했습니까?

여러 가지 방법을 시도한 후에 제 결정은 불만스러운 작업을 사용하여 중복 된 CSS 블록을 제거하는 것이 었습니다.

Answer 1

발견. 다음과 같이 가져 오기를 사용해야했습니다.

@import (reference) "bootstrap.less"; 

.myclass{color:@bootstrap-variable;} 
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess} 

"참조"를 사용하면 가져온 파일이 포함되지만 포함되지는 않습니다.

Answer 2

적은 파일을 모두 하나의 파일로 컴파일하는 것이 좋습니다. 그러나 dash.less 변수에는 bootstrap.less가 필요합니다. "당신이 변수를 사용하려면 etc.so 당신이 '@import를 가져올 수 있습니다

// Core variables and mixins 
@import "variables.less"; 
@import "mixins.less"; 

// Reset 
@import "normalize.less"; 
@import "print.less"; 

- 당신이 bootstrap.less 덜 덤프 부트 스트랩에서 볼 경우, 하나 개의 솔루션이,이, 구성 요소 현명한 적은 파일이 같이 포함되어 있습니다 variables.less "는 당신의 'dash.less'thats :)