ember-cli v0.0.28에 broccoli-compass를 추가하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com//questions/24056981

문제

나는 나침반을 사용하여 SASS를 CSS로 사전 처리할 수 있기를 원합니다. ember-cli 프로젝트.

이 일을 broccoli-sass 사소한 일이다. bower install broccoli-sass 이에 대한 지원이 이미 내장되어 있으므로 필요한 전부입니다.

이 일을 broccoli-compass 그러나 다소 까다로운 것으로 나타났습니다 ...어떻게?

세부:

이 질문은 예전에 받았던 질문인데, ember-cli v0.0.23용;그리고 그것은 대답이 오래된 것으로 보입니다. 주요 문제는 Ember -Cli가 많은 것을 초록하는 것 같습니다.Brocfile.js, 다른 파일에 넣습니다. preprocessor.js, 사용하여 Registry, 따라서 솔루션은 표준 보기와 다를 수 있습니다. Brocfile.js

업데이트:

이 질문은 @saygun에 의해 답변되었으며 솔루션을 사용하면 broccoli-compass를 사용하여 SCSS --> CSS를 컴파일할 수 있습니다.그러나 몇 가지 주의 사항이 있습니다.

  • 사소한 문제:기존 minifyCss meber-cli의 전처리기가 작동하지 않습니다.자체 CSS를 축소하려면 나침반을 구성해야 합니다.
  • 주요 문제:SCSS 파일이 이미지를 참조하는 경우 생성된 CSS 파일에는 경로가 Broccoli에서 생성된 임시 트리 폴더 내에 있는 이미지에 대한 링크가 포함됩니다.이 문제를 해결하는 방법을 잘 모르겠어서 후속 질문을 했습니다. 나침반을 사용하여 ember-cli에서 이미지 스프라이트를 생성하는 방법은 무엇입니까?
도움이 되었습니까?

해결책

broccoli-compass를 설치해야합니다. 

npm install broccoli-compass --save-dev
.

루비 gem sass-css-importer를 설치해야합니다. 

gem install sass-css-importer --pre
.

다음 브로피 에서이 작업 : 

var compileCompass = require('broccoli-compass');

app.styles = function() {
  var vendor = this._processedVendorTree();
  var styles = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles'
  });

  var stylesAndVendor = mergeTrees([vendor, styles, 'public']);

  return compileCompass(stylesAndVendor, 'app' + '/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app' + '/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};
.

다른 팁

최근에 출판했어요 ember-cli-나침반-컴파일러 이는 최신 ember-cli 앱(>= 0.0.37)을 위한 ember-cli 애드온입니다.

다음 명령을 사용하여 설치하면 됩니다.

npm install --save-dev ember-cli-compass-compiler

다른 구성은 필요하지 않으며 변환됩니다. app/styles/appname.scss 에게 appname.css 바르게.이름에서 알 수 있듯이 다음을 사용할 수 있습니다. 나침반 sass 외에도.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top