Unable to get it to work, no specific error message

[visoft]

Unable to get it to work, no specific error message

[visoft]

Ok, I'm close. The problem had to do with me trying to import foundation which exists in the vendor directory. I guess I have the same problem as #2.

[samselikoff]

If you

var pickFiles = require('broccoli-static-compiler');
var vendor = pickFiles('vendor', {srcDir: '/', destDir: '/vendor'});

broccoli will be serving up your entire vendor folder, so @import 'vendor/...' functions will work in sass.

Note that broccoli build would then package up your entire vendor directory, which you don't want to do. So you'll need to do some more work for production.

[g13013]

@samselikoff @visoft i've just published the support for multiple value options (v0.0.5) like import-path:

Suppose you have a vendor folder in the root of your project that contains vendor_lib.scss, you can import it in your main scss file:

@import "vendor_lib.scss"
...

and add the import path in the Broccoli task:

 app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    importPath: [
      process.cwd() + '/vendor', //relative to the root of your project
      'another_vendor_folder', //merged tree using `broccoli-static-compiler`
      '/absolute/path/to/vendor/folder' //could be outside the project
    ],
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets'
  });
};

[samselikoff]

@g13013 Having trouble getting it work. The compass command is working, so it's finding the vendor directory, but my imports aren't.

Should it be concatenating everything? My browser is still making requests to each of my vendor imports.

[g13013]

please give me an example of your code

[samselikoff]

Here's my brocfile: https://gist.github.com/samselikoff/39a23ba58b2f65cd915f

Then in app.scss I have

@import "/vendor/bootstrap/docs/assets/css/bootstrap.css";

ember serve works without errors, but when I load my app in the browser, the vendor css isn't coming through:

[g13013]

I see that you're importing simple css files using compass, since you are using ember-cliwhy not just import css files like so:

app.import('vendor/bootstrap/docs/assets/css/bootstrap.css');
...
app.import('vendor/bootstrap/docs/assets/js/bootstrap.min.js');
app.import('vendor/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js');
app.import('vendor/slider/js/bootstrap-slider.js');

if you insist on managing them via compass, you have to copy your vendor folder using broccoli-static-compiler and then your code should work:

var vendor = pickFiles('bower_components', {
      srcDir: '/',
      destDir: '/vendor'
    });
var styles = pickFiles('styles', {
      srcDir: '/',
      destDir: '/styles'
    });
var compiledCss = compileCompass(mergeTrees([vendor, styles]), 'styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: 'styles',
    imagesDir: 'public/images',
    cssDir: 'assets'
  });

and then

@import "vendor/bootstrap/docs/assets/css/bootstrap.css";

[g13013]

@samselikoff try this and see what happens https://gist.github.com/g13013/9f1d71f72994199048b8

[g13013]

@samselikoff to debug you I advise to use brocolli build "FOLDER" and see it's content, you will understand what happens under the hood :)

[samselikoff]

@g13013 That's what I initially tried. By default Ember CLI will take all css files imported using that statement, concat them and output to /assets/vendor.css. But, because I've overwritten app.styles to do the Compass work, that behavior no longer happens.

You can see that functionality here: https://github.com/stefanpenner/ember-cli/blob/master/lib/broccoli/ember-app.js#L271.

When we do app.styles = function() { return compileCompass(..., we no longer get vendor.css so we have to use some other method. That's why I used pickFiles to serve up the vendor directory, and then imported the css in my app.scss file.

[visoft]

This is what worked for me:

var compileCompass = require('broccoli-compass');
app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets',
    importPath: [
      process.cwd() + '/vendor/foundation/scss'
    ],
  });
};

Now I'm able to @import foundation from my scss file. The only thing is that instead of the .css being named my-app.css it's simply named app.css now. Is there a way to get the name back to the default?

[g13013]

@samselikoff sorry i've never worked with ember-cli :), still no luck ?

@visoft just name your app.scss->'my-app.scss', if you want the file to be dynamically renamed according to the app's name, you can either use an another plugin to rename your scss file or if you don't find you could use my other plugin https://github.com/g13013/broccoli-auto-generated

[samselikoff]

@g13013 My initial solution (serving up the whole vendor folder) is working for now. I'll reach out to the Ember CLI team and see if there's a better option out there.