2014-06-13 4 views
2

Vic Savkin's sample app을 골격으로 사용하여 AngularJS 응용 프로그램을 AngularDart로 마이그레이션하기 시작했습니다.AngularDart 구성 요소 및 부트 스트랩이 적음 사용

기존 프로젝트에 CSS가 적습니다. 나는 그것을 프로젝트에 포함시키는 방법에 대해 명확하지 않다.

특히 'lib'폴더에는 Components가 있고 'web'폴더에는 CSS가 있습니다. 구성 요소에서 사용할 프로젝트 수준에서 Less 변수를 정의 할 수 있기를 원합니다. 다른 미래의 프로젝트에서 구성 요소를 사용하고 싶습니다.

각 구성 요소의 less 파일에서 bootstrap.less 및 variables.less 파일을 가져와야합니까, 아니면보다 효율적인 방법이 있습니까?

답변

0

처음에 weblib에서 뭔가를 사용하려면 lib에 넣으십시오. lib에서 까지 package:mypackage/asset/css/mycss.css으로 가져올 수 있지만 그 반대의 경우는 가져올 수 없습니다.

부트 스트랩이 제대로 작동하지 않으므로 shadowDOM을 피할 것입니다.
여전히 shadowDOM을 사용하려면 각 구성 요소에 CSS를 추가해야합니다 (중첩 된 구성 요소가있을 때 문제가 발생할 수 있음). 또는 CSS 선택기를 수정해야합니다.

당신은 당신과 같은 각 규칙에 대해 추가 선택기를 추가하는 데 필요한 CSS 선택기 수정하는 경우 : 당신이 당신의 모든 구성 요소를 작성하는 경우

/* original */ 
.someclass .someotherclass { xxx: yyy; } 


/* modify to */ 

.someclass .someotherclass, 
* /deep/ .someclass /deep/ .someotherclass, 
* /deep/ .someclass .someotherclass, /* might be necessary too */ 
{ xxx: yyy; } 

을 (그리고 shadowDOM를 사용하지 않는 경우에만 제 3 자 구성 요소를 사용) Angular.js와 같이 index.html 페이지에 모든 CSS를 넣을 수 있습니다.

+0

고맙습니다. shadowDOM 때문에 AngularDart를 사용하고 싶습니다. 나는 "Bootstrap이 shadowDOM과 잘 작동하지 않는다"는 것을 다른 곳에서는 읽었지만 그것이 의미하는 바가 무엇인지 이해하지 못합니다. (JS가 아닌) 부트 스트랩 CSS만을 사용한다면, shadowDOM은 이것이 부트 스트랩임을 어떻게 알고 그걸 가지고 놀지 않기로 선택합니까? :) AngularDart와 Bootstrap과 함께 Angular-ui Bootstrap 라이브러리를 사용하면 세 명이 친구가 될 것입니까? – kpg

+0

ShadowDOM은 경계를 만들고 shadowDOM 내부의 요소에 도달하기 위해 각 CSS 규칙에 특별한 선택자가 필요합니다 (예 :'/ deep /'). 해결 방법은 각 구성 요소에 스타일 링크를 추가하는 것이지만 모든 경우에 작동하지는 않습니다. Angular.dart.ui을 아십니까? –

+0

예, Angular-ui BootStrap이라고 말하면 앵귤러 다트를 의미합니다. 나는 Bootstrap js에 대해 다트 대체품을 제공하고 있다고 가정했습니다. Angular-dart-ui를 사용하면 shadowDOM과 함께 AngularDart 프로젝트에서 Bootstrap 클래스를 사용할 수있을 것입니다. – kpg

관련 문제