gruntjs - Use Foundation instead of Bootstrap with SASS in a yeoman created application -

i've created angularjs application yeoman. want switch front-end framework bootstrap foundation.

after installed foundation bower install foundation --save

grunt add following line index.html file.

<link rel="stylesheet" href="bower_components/foundation/css/foundation.css" /> 

how can force grunt use sass way.

for sass way index.html untouched (except js files) main.scss file nedds following line or simliar

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

to work sass.

here grundfile.js trigger bower.json

watch: {   bower: {     files: ['bower.json'],     tasks: ['wiredep']   }, } 

and here wiredep task , compass task

// automatically inject bower components app wiredep: {   options: {     cwd: '<%= yeoman.app %>'   },   app: {     src: ['<%= yeoman.app %>/index.html'],     ignorepath:  /..\//   },   sass: {     src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],     ignorepath: /(\.\.\/){1,2}bower_components\//   } },  // compiles sass css , generates necessary files if requested 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: './bower_components',     httpimagespath: '/images',     httpgeneratedimagespath: '/images/generated',     httpfontspath: '/styles/fonts',     relativeassets: false,     assetcachebuster: false,     raw: 'sass::script::number.precision = 10\n'   }, 

i'm not 100% sure if relevant part, attached full grundfile.js.

this i've done, there might more , else can find out, it's working expected far. hope helps:

first want exclude foundation.css wiredep section of gruntfile.js. adding exclude: ['foundation.css'], wiredep section: (this remove call foundation.css in head of index.html"

// automatically inject bower components app wiredep: {  ...//  app: {    src: ['<%= yeoman.app %>/index.html'],    exclude: ['foundation.css'],    ignorepath:  /..\//  },  ...// }, 

then, in compass section of gruntfile.js, change importpath access scss files located in bower_components/foundation/scss:

compass: {    options: {    ...//      importpath: './bower_components/foundation/scss',    //...    } } 

lastly, in app/styles, add common scss files foundation.

following yeoman angular's naming convention, main.scss this:

@import      "normalize",  // import bower_components/foundation     "settings",   // custom _settings.scss file in app/styles directory     "foundation"; // import bower_components/foundation 

pardon unclear or missing steps wrote rather quickly. have steps use libsass using grunt-sass, removed them figuring it's out of scope question.