0

Estou tentando fazer a instalação e a compilação do Foundation 6 via SASS.

Pois bem, a instalação via NPM eu consegui fazer corretamente conforme a instrução no site:

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

Então, eu criei o arquivo Gruntfile.js e config.rb conforme a documentação:

Esse é o meu 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'] );

};

E esse o config.rb

add_import_path "node_modules/foundation-sites/scss"

Quando eu rodo o comando grunt css, que é para compilar o SCSS e em seguida minificar, o seguinte erro é retornado no terminal:

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

Já tentei verificar a documentação do grunt-contrib-sass e executar o Grunt da seguinte maneira:

    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']);

};

O erro muda para:

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.

Alguém faz alguma idéia do que esteja acontecendo?

1 Resposta 1

0

Consegui resolver!

Adicionei no meu app.scss o seguinte código:

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

e rodei o grunt css para compilar o arquivo o que acabou gerando o erro abaixo de sintaxe por parte do 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

O erro era falta de um ; no final da linha 415 do arquivo _classes.scss. Após corrigido, tudo funcionou perfeitamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .