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

Question

I've created an AngularJS application with yeoman. Now I want to switch the front-end framework from bootstrap to foundation.

After I installed foundation with bower install foundation --save

Grunt will add the following line to my index.html file.

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

How can I force grunt to use the sass way.

For the sass way the index.html is untouched (except js files) but the main.scss file nedds the following line or simliar

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

to work with the sass.

Here is the Grundfile.js trigger for bower.json

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

And here is the wiredep task and the compass task

// Automatically inject Bower components into the 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 to CSS and 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 this is the relevant part, so I attached my full Grundfile.js.

Answer 1

This is what I've done, there might be more to it and hopefully someone else can find out, but it's working as expected so far. Hope this helps:

First you want to exclude foundation.css from the wiredep section of gruntfile.js. Do this by adding exclude: ['foundation.css'], to the wiredep section: (this will remove the call to foundation.css in head of index.html"

// Automatically inject Bower components into the app
wiredep: {
 ...//
 app: {
   src: ['<%= yeoman.app %>/index.html'],
   exclude: ['foundation.css'],
   ignorePath:  /..\//
 },
 ...//
},

Then, in the compass section of gruntfile.js, change the importPath to access the scss files located in bower_components/foundation/scss:

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

Lastly, in app/styles, add the common scss files for foundation.

Following Yeoman Angular's naming convention, main.scss could look like this:

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

Pardon any unclear or missing steps as I wrote this rather quickly. I also have steps to use libsass using grunt-sass, but I removed them figuring that it's out of scope for this question.