Error when compiling Foundation 6 SASS/SCSS with Grunt

Asked

Viewed 98 times

0

I’m trying to install and compile Foundation 6 via SASS.

Well, the installation via NPM I managed to do correctly according to the instruction on the site:

http://foundation.zurb.com/sites/docs/sass.html

So, I created the Gruntfile.js and config.Rb file according to the documentation:

This is my Gruntfile.js:

module.exports = function( grunt ) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
        options: {
          loadPath: ['node_modules/foundation-sites/scss'],
          compass:true,
        },
        files :{
          'assets/scss/app.scss': [
                        'assets/stylesheets/app.css',
                    ]
        }
      },
    },
    cssmin: {
            minify: {
                files: {
                    'assets/stylesheets/app.min.css': [
                        'assets/stylesheets/app.css',
                        'assets/jquery-ui-theme/jquery-ui.css'
                    ]
                }
            }
        },
    clean: {
            js: ['js/app.min.js', 'js/jquery.min.js'],
            css: ['css/app.min.css'],
        },
  });


  // Plugins do Grunt
  grunt.loadNpmTasks( 'grunt-contrib-watch' );
  grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
  grunt.loadNpmTasks( 'grunt-contrib-clean' );
  grunt.loadNpmTasks( 'grunt-contrib-sass' );

  // Tarefas que serão executadas
  grunt.registerTask( 'default', [ 'watch' ] );
  grunt.registerTask( 'css', [ 'sass','clean:css', 'cssmin'] );

};

And that’s the config.Rb

add_import_path "node_modules/foundation-sites/scss"

When I turn the remote grunt css, which is to compile the SCSS and then minify, the following error is returned in the terminal:

Errno::ENOENT: No such file or directory @ rb_sysopen - undefined
  Use --trace for backtrace.

I’ve tried to check the documentation of grunt-contrib-sass and run Grunt as follows:

    module.exports = function( grunt ) {
  grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'assets/stylesheets/app.css': 'assets/scss/app.scss',       // 'destination': 'source'
      }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-sass');

grunt.registerTask('default', ['sass']);

};

The error changes to: 

Error: Undefined mixin 'foundation-everything'.
        on line 1 of assets/scss/app.scss, in `foundation-everything'
        from line 1 of assets/scss/app.scss
  Use --trace for backtrace.

Does anyone have any idea what’s going on?

javascript sass grunt zurb-foundation

1 answer

0


I managed to solve!

I added the following code to my.scss app:

@import 'foundation';
@include foundation-everything;

and I ran Grunt css to compile the file which eventually generated the below syntax error by the Framework

Invalid CSS after "...grid-margin-y')": expected "}", was ".grid-frame.gri..."
        on line 415 of /home/bruno/workspace/wordpress-daniela/wp-content/themes/whynot/node_modules/foundation-sites/scss/xy-grid/_classes.scss
        from line 51 of /home/bruno/workspace/wordpress-daniela/wp-content/themes/whynot/node_modules/foundation-sites/scss/xy-grid/_xy-grid.scss
        from line 31 of /home/bruno/workspace/wordpress-daniela/wp-content/themes/whynot/node_modules/foundation-sites/scss/foundation.scss
        from line 1 of assets/scss/app.scss

The mistake was lack of a ; at the end of line 415 of the file _classes.scss. After corrected, everything worked perfectly.

Browser other questions tagged javascript sass grunt zurb-foundation

You are not signed in. Login or sign up in order to post.