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.
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"Then, in the compass section of gruntfile.js, change the importPath to access the scss files located in 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: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.