2015년 11월 3일 화요일

Meteor Less 팁

meteor 는 자동(규칙에 맞게)으로 파일들을 모아서 만드는데
less 일 경우엔 @import 라는 게 있어서 조금 헷갈린다.

less-autofixer 패키지랑 같이 쓰니까 더욱 헷갈려서 결국 RTFM 하기로 함.
패키지 문제니까 https://github.com/meteor/meteor/tree/devel/packages/less 를 보았다.

예전에 쓰던 방법이랑 좀 다른 것도 있어서 정리.


  1. less 사용
    1. 기본
      meteor add less
    2. package 에서
      Package.onUse(function (api) {
        ...
        api.use('less');
        ...
      });
  2. 파일 규칙
    1. *.less  : 자동 추가. import 불가
    2. *.import.less : 자동 추가 x. import 가능
    3. imports 디렉토리 아래 *.less : 자동 추가 x. import 가능
    4. packages 인 경우 packages.js 에서 {isImport:true} 옵션을 사용.
      api.addFiles('x.less', 'client', {isImport: true}) 이런 식으로 지정한 경우 import 가능
  3. import
    1. 다른 패키지에서 import
      @import "{my-package:pretty-buttons}/buttons/styles.import.less"
    2. 대상 앱에서 import
      @import "{}/client/styles/imports/colors.less"
    3. package 안에서 import
      @import "/path/to/style.import.less";
이제까지 계속 *.import.less 패턴만 썼는데 **/imports/**/*.less 패턴도 써봐야겠다. 깔끔하네.