Error compiling SASS / SCSS from Foundation 6 with Grunt

0

I'm trying to install and build Foundation 6 via SASS.

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

link

So I created the file Gruntfile.js and config.rb 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 this is config.rb

add_import_path "node_modules/foundation-sites/scss"

When I run the command 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 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?

    
asked by anonymous 15.08.2017 / 20:33

1 answer

0

I solved it!

I added the following code to my app.scss:

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

I ran the grunt css to compile the file which ended up generating the error below syntax 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 error was missing a ; at the end of line 415 of file _classes.scss . After corrected, everything worked perfectly.

    
16.08.2017 / 14:42