lundi 29 juin 2015

Incorporating 3rd-party theme to ember-cli project / Brocfile / outputPaths / multiple outputs

I want to use Inspinia ( http://ift.tt/1meHqjj ) in my ember project built using ember-cli.

This inspinia comes with set of files (css, jss, fonts, etc) in particular structure / layout. I need to reflect that structure in the outcome of ember-cli build-process.

The way I (try to) integrate is as follows:

  1. I copied the entire folder inside Inspinia Seed-Project into my ember-cli's vendor folder, under subfolder that I name "inspinia". There we have subfolders: css, font-awesome, fonts, img, js.

enter image description here

  1. Then I added these lines to my Brocfile (still, not including any Inspinia stuffs). Just the bootstrap:

    app.import('bower_components/bootstrap/dist/css/bootstrap.css'); app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css');

enter image description here

All, fine. Bootstrap stuffs go to vendor.css under assets/. The default behavior.

  1. Then I added these lines (now from Inspinia) to the Brocfile.

    app.import('vendor/inspinia/css/animate.css'); app.import('vendor/inspinia/css/style.css');

enter image description here

All is "fine", in the sense that the project compiles, animate.css and style.css appended to vendor.css (still the default behavior).

But I want to make animate.css and style.css goes to assets/inspinia/css/animate.css and assets/inspinia/css/style.css, respectively. So...

  1. I tried this:

    var app = new EmberApp({ outputPaths: { app: { html: 'index.html', css: { 'app': '/assets/dash-imss.css' }, js: '/assets/dash-imss.js' },

    vendor: {
      css: {
        'inspinia/css/animate': 'assets/inspinia/css/animate.css',
        'inspinia/css/style': 'assets/inspinia/css/style.css'
      }
    }
    
    

    } });

enter image description here

But now the compilation fails with an error:

undefined is not a function
TypeError: undefined is not a function
  at module.exports (/Users/raka/Documents/MyEmberCLIPlayground/dash-imss/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/index.js:24:38)

I already added come console.logs to broccoli-sourcemap-concat/index.js, so I can see the difference between successful compile (step 2 and 3) and this failed compile; In the successful compile, outputFile is a string. In the failed compile (step 4), the outputFile is a json object. It doesn't have slice function.

I tried some other arrangements in my Brocfile (in that outputPaths specification). None of them works. And I couldn't find any article / discussion on the web on this topic.

Can someone help me solve this?

Thanks in advance, Raka




Aucun commentaire:

Enregistrer un commentaire