angular-generator with susy and breakpoint

Question

I am trying to setup an angular app using Susy and Breakpoint instead of bootstrap.

I am using yeoman to run angular-generator. During the install, instead of saying Yes to bootstrap, i say No. This all goes well and my app runs in the browser fine with 'grunt serve'.

Next i run: bower install susy and bower install breakpoint - both install fine and i can see them in the bower_components folder.

I then import them by manually adding @import reference to main.scss like this:

// bower:scss
@import "../bower_components/susy/sass/_susy.scss";
@import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";
// endbower

And also in the Gruntfile.js i have added require: 'susy' to compass like so:

compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    httpImagesPath: '/images',
    httpGeneratedImagesPath: '/images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n',
    **require: 'susy'**
  },

As outlined on the susy website: http://susydocs.oddbird.net/en/latest/install/

Ok, that's all well and good, but here's the problem.. because i have manually adding them to my main.scss file, everytime i stop and start the app, it deletes the @import references in my SCSS file. i don't know how to add them dynamically / or properly to the gruntfile.js so that they get compiled and saved permenantly. Each time i stop and start grunt, both imports are removed from main.scss leaving me with this:

// bower:scss
// end bower

Has anyone else had this same problem, if so what's the solution? Any help would be appreciated.

thanks ~declan

ever figure this out? – Mr. BigglesWorth Aug 13 '14 at 22:57 — Mr. BigglesWorth, Aug 13 '14 at 22:57

score 0 · Answer 1 · edited Oct 10 '14 at 19:31

Try moving the @import statements outside of the bower comments. So, instead of:

// bower:scss
@import "../bower_components/susy/sass/_susy.scss";
@import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";
// endbower

try:

// bower:scss
// endbower
@import "../bower_components/susy/sass/_susy.scss";
@import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";

That worked for me.

angular-generator with susy and breakpoint

1 Answers1