Menu icon Foundation
Setting Up Foundation 6 with SASS

I am trying to setup, foundation sass. However when I compile my sass, the foundation.css file is not being read, only the top part of the comment.

I am not getting any grunt errors at the moment.

`foundation.scss`
@import "../bower_components/foundation-sites/scss/foundation";
            

         

/** gruntfile.js */
/*jslint node: true */
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            options: {
                /** Only use include_paths if extracting elements from Bower */
                includePaths: ['bower_components/foundation-sites/assets']
            }, //options
            dist: {
                options: {
                    outputStyle: 'expanded',
                    sourceMap: false
                },
                files: {
                    'css/foundation.css': 'scss/foundation.scss',
                    'css/main.css': 'scss/main.scss'
                }
            }
        }, // sass

        compass: {
            dev: {
                options: {
                    config: 'config.rb'
                }
            } // dev
        }, //compass

        watch: {
            options: {
                livereload: true,
                dateFormat: function(time) {
                        grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
                        grunt.log.writeln('Waiting for more changes...');
                    } //date format function
            }, //options
            scripts: {
                files: ['*.js', 'js/*.js']
            }, // scripts
            //Live Reload of SASS
            sass: {
                files: 'scss/**/*.scss',
                tasks: ['sass']
            }, //sass
            css: {
                files: ['scss/*.scss'],
                tasks: ['compass']
            },
            html: {
                files: ['*.html']
            }, //html
            all: {
                files: '{,**/}*.js',
                tasks: ['jshint']
            } //all
        }, //watch

        postcss: {
            options: {
                processors: [
                    require('autoprefixer')({
                        browsers: 'last 2 versions'
                    })
                ]
            }
        }, //post css

        jshint: {
            options: {
                reporter: require('jshint-stylish')
            },
            target: ['*.js', 'js/*.js'],
            all: ['*.js', 'js/*.js']
        } //jshint
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-force-task');

    grunt.registerTask('default', ['sass', 'watch', 'compass', 'force:jshint']);
};
            

         

Screen shot 2015 12 27 at 7.01.47 pm

GruntSass

I am trying to setup, foundation sass. However when I compile my sass, the foundation.css file is not being read, only the top part of the comment.

I am not getting any grunt errors at the moment.

`foundation.scss`
@import "../bower_components/foundation-sites/scss/foundation";
            

         

/** gruntfile.js */
/*jslint node: true */
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            options: {
                /** Only use include_paths if extracting elements from Bower */
                includePaths: ['bower_components/foundation-sites/assets']
            }, //options
            dist: {
                options: {
                    outputStyle: 'expanded',
                    sourceMap: false
                },
                files: {
                    'css/foundation.css': 'scss/foundation.scss',
                    'css/main.css': 'scss/main.scss'
                }
            }
        }, // sass

        compass: {
            dev: {
                options: {
                    config: 'config.rb'
                }
            } // dev
        }, //compass

        watch: {
            options: {
                livereload: true,
                dateFormat: function(time) {
                        grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
                        grunt.log.writeln('Waiting for more changes...');
                    } //date format function
            }, //options
            scripts: {
                files: ['*.js', 'js/*.js']
            }, // scripts
            //Live Reload of SASS
            sass: {
                files: 'scss/**/*.scss',
                tasks: ['sass']
            }, //sass
            css: {
                files: ['scss/*.scss'],
                tasks: ['compass']
            },
            html: {
                files: ['*.html']
            }, //html
            all: {
                files: '{,**/}*.js',
                tasks: ['jshint']
            } //all
        }, //watch

        postcss: {
            options: {
                processors: [
                    require('autoprefixer')({
                        browsers: 'last 2 versions'
                    })
                ]
            }
        }, //post css

        jshint: {
            options: {
                reporter: require('jshint-stylish')
            },
            target: ['*.js', 'js/*.js'],
            all: ['*.js', 'js/*.js']
        } //jshint
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-force-task');

    grunt.registerTask('default', ['sass', 'watch', 'compass', 'force:jshint']);
};
            

         

Screen shot 2015 12 27 at 7.01.47 pm

This post has been closed. No new replies can be added.

Manuel Becker over 3 years ago

Hey James!

I had the same problem. Just add the following line to your app.scss:

@include foundation-everything;

With the new foundation you are able to select with Sass what exactly you want to include.
Hope this helps!

Manuel

James Van Waza over 3 years ago

@Manuel Becker , Thanks, Once I added @include foundation-everything; it worked and grunt ran successfully.

Thanks a Million.