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.