Broccoli Frustrations

1

I’m stuck on a simple task of getting Broccoli to work for something as simple as compiling sass. I asked the question on SO but it may be a bit obscure.

I have app.scss in my app/styles directory and this is what I’ve tried in my brocfile (which I tried to model after the sample app’s brocfile:

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler')
var compileSass = require('broccoli-sass');
var filterTemplates = require('broccoli-template')

var app = new EmberApp();

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: './bower_components/foundation/scss',
  destDir: './app/styles'
});

var appsScss = compileSass([styles], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree(appsScss);

IMO Broccoli is woefully under documented. I volunteer to contribute some guide docs ( I can put my useless BA in English to use ) but I would need someone to give me a pretty thorough tutoring.

That aside, what am I doing wrong?

– Edit 1: Oh, and I get this error when I ember serve:

version: 0.1.3
valid watchman found, version: [3.0.0]
Livereload server on port 35729
Serving on http://0.0.0.0:4200/
Attempting to watch missing directory: styles
Error: Attempting to watch missing directory: styles
    at EventEmitter.Watcher_addWatchDir [as addWatchDir] (/Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/broccoli-sane-watcher/index.js:90:11)
    at /Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:67:35
    at $$$internal$$tryCatch (/Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
    at /Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1066:13
    at $$rsvp$asap$$flush (/Users/jdillon/Desktop/openSrc/shoppingList/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
    at process._tickCallback (node.js:419:13)

– Edit 2: I updated my brocfile.js to this simple diddy:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var compileSass = require('broccoli-sass');

var app = new EmberApp();

var appsScss = compileSass([], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree(appsScss);

This doesnt return any errors with ember serve.

In app.scss :

@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";

$bgcolor: blue;

h2 {
  background-color: $bgcolor;
}

The $bgcolor variable correctly compiles and changes the background color, but I only have about 800 lines of compiled CSS, when I should have north of 4.4k due to Foundation.

1 Like
2

Have you considered ember-cli-foundation-sass - npm ?

3

Actually I wasn’t familiar with that package and I’ll look into it.

However, it still doesn’t ease my frustrations. I can’t stand leaving something like this without understanding it and it’s components. I tend to get like a dog on a bone. Ha

4

Looks like you are almost there :smile:

Try this

    /* global require, module */
    
    var EmberApp = require('ember-cli/lib/broccoli/ember-app');
    var compileSASS = require('broccoli-sass');
    
    var app = new EmberApp();
    
    var styles = 'styles';
    
    compileSASS([styles], './app/styles/app.scss', './app/styles/app.css')
    
    module.exports = app.toTree();

You could also simplify that by simply passing ['styles'] tocompileSASS.

As to why this works, I’m afraid I don’t have the depth of understanding necessary to explain how Broccoli works.

1 Like
5

@mfeckie So that removed any errors, and the Scss variables still compile correctly, but its still not importing the foundation file. Although it looks like its importing the normalize.scss. I even tried importing all components directly. I dont get any errors as to why its not working.

Rrrraawwrrr

6

So here is an example:

var tree = pickFiles("app/styles", {
  srcDir: '/',
  destDir: 'mui'
});
var muiTree = pickFiles("material-ui/src/less", {
  srcDir: '/',
  destDir: 'material-ui'
});
return compileLess(mergeTrees([tree, muiTree]), 'mui/app.less', 'assets/app.css')

so you can see the first pick file creates a tree for all the app styles. The second pick files create a tree for the library styles (in your case this should be foundation). You should have a desination directory that matches the style library (in this case material-ui). This will be used for the imports in your less/sass file:

@import "material-ui/scaffolding.less";
@import "material-ui/components.less";

You see that I do not reference the material-ui files thru global path, but based on the destDir name I previously used.

The call to compileLess (which is the same as compileSass in your example), takes the full tree of less/sass dependencies as the first param, the second param is the main file for your styles and the third is the output file.

When less/sass want to check for dependencies (via import) it will look in the tree you passed as the first param.

Hope this helps.

7

So heres my attempt:

// Brocfile.js

var tree = pickFiles("app/styles", {
  srcDir: '/',
  destDir: 'sass'
});
var foundationTree = pickFiles("bower_components/foundation/scss", {
  srcDir: '/',
  destDir: 'foundation'
});

var appsScss = compileSass([tree, foundationTree], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree();

// app/styles/app.scss
@import "foundation/normalize";


$bgcolor: blue;

h2 {
  background-color: $bgcolor;
}

Sadly, this had the same results.

valid watchman found, version: [3.0.0]
Livereload server on port 35729
Serving on http://0.0.0.0:4200/
/Users/jdillon/Desktop/openSrc/shoppingList/tmp/tree_merger-tmp_dest_dir-4MST6tMC.tmp/app/styles/app.scss:2: file to import not found or unreadable: "foundation/normalize"
Current dir: /Users/jdillon/Desktop/openSrc/shoppingList/tmp/tree_merger-tmp_dest_dir-4MST6tMC.tmp/app/styles/
 [string exception]
Error: /Users/jdillon/Desktop/openSrc/shoppingList/tmp/tree_merger-tmp_dest_dir-4MST6tMC.tmp/app/styles/app.scss:2: file to import not found or unreadable: "foundation/normalize"
Current dir: /Users/jdillon/Desktop/openSrc/shoppingList/tmp/tree_merger-tmp_dest_dir-4MST6tMC.tmp/app/styles/
 [string exception]

Just to be clear on the pickFiles() method (broccoli-static-compiler):

// "bower_components/foundation/scss" is the input path that `pickFiles()` will start at.
var foundationTree = pickFiles("bower_components/foundation/scss", {

  // `srcDir` is whatever path you mount onto the first argument passed to `pickFiles()`
  srcDir: '/',

  // `destDir` is the new relative path of everything in the src directory
  destDir: 'foundation'
});

Is that correct? Do I need to pass an argument to app.toTree()?

Thanks. I’m hell-bent on understanding broccoli well enough to write how-to documentation for it.

9

It just occured to me that I should post the repo. Maybe somebody can help me untie this mess.

jdillon522 - Ember-Shoppint-List

Its just a silly little shopping list prototype. A coworker did one with Angular and I took up the challenge for Ember’s sake.

10

I’ve sent you a pull request :sunny:

11

If you’re really keen on helping out with documentation, you should reach out to Jo Liss. She’s the creator of Broccoli.

12

Thanks man! You fixed it. I swear I tried exactly what you PR’d. Probably spelt something wrong or left out a comma. Thats usually how it goes :angry:

But yeah, I’m totally going to take you up on your suggestion and reach out ro jo liss. I dont know why I didnt think about that yet.

Thanks!

13

Jo has done some amazing work, and I’m really grateful for that. I agree that the documentation is underwhelming, but we should always remember to be gentle with our feedback :smiley:. I think very few people set out to do poor documentation, but when things are developing quickly it can go on the back back-burner. The docs for Ember were pretty hit and miss while it was in a state of flux, but once it went 1.0 things were much more satisfactory and people were in a better position to document.

14

Totally agree. I’ve found that very experienced developers tend to write poor documentation not because they suck, but because they are so good they forget that not everyone is at their level. The current broccoli docs are probably sufficient for someone on the core team, but it’s a much different story for someone at my level.

Hopefully I can help. :slight_smile:

1 Like
15

You can pass paths to the directories with sass/scss files as first argument. Doesn’t matter if they are libraries like foundation or your own files. Also - path to the source file should be relative to one of those directories. So something like this should work:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var compileSass = require('broccoli-sass');

var app = new EmberApp();

var sassImportPaths = [
  'app/styles',
  'bower_components/foundation/scss',
];

var appCss = compileSass(sassImportPaths, 'app.scss', '/assets/app.css');


module.exports = app.toTree([appCss]);
1 Like
16

Did you ever get this working so you can output 2 css files from a single project? I’m thinking about blogging about the topic but wanted to see if this was still something you had time/energy to hack on :smile:

17

Let me know if you take off with this. I have used Broccoli for some time with my personal projects both inside and outside of ember-cli and I would love to be able to write more documentation for use cases like this.

18

Sadly, my time has been completely diverted from anything Ember and broccoli (working on fixing that). When and if I get back to thing Ember and everything else will be over the 2.0 mark.

19

I faced the same problem but I fixed it with installing ember-cli-sass directly via npm instead of ember. Instead of:

ember install ember-cli-sass

I used:

npm install --save-dev ember-cli-sass

as the documentation on github points out. Afterwards, my app.scss file including import statements of other *.scss files within same folder (app/styles) ended up compiled into a single file /dist/assets/app.css