CODEWITHSUNDEEP
javascriptsassgruntjscompass-sassgrunt-contrib-watch
mheavers
mheavers

Reputation: 30158

grunt "undefined variable" errors for imported sass files

I am trying to set up grunt to compile my sass into css.

I actually have it working, but the problem (I think) is that the way I have the grunt file structured, it is compiling every scss file in the watch task, rather than just the base scss file, which imports all the others. As a result, even though they're not being used, the compiled .css files all have ugly backtrace statements in them for the errors on the undefined variables, and I imagine grunt is running much slower because it's compiling each sass file into a css file, instead of just the one base file.

What I want to have happen is grunt recognize a change in any scss file in the watch task, but only compile the base scss file. Below is my base scss file, and an excerpt from my grunt file:

base.scss:

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit-no-css";


@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";
@import "pages/*";

gruntfile:

module.exports = function (grunt) {

  grunt.initConfig({
    watch: {
      sass: {
        files: ['sass/{,**/}*.{scss,sass}'],
        tasks: ['compass:dev'],
        options: {
          livereload: false
        }
      },
      css: {
        files: ['css/{,**/}*.css']
      }
    },
    compass: {
      options: {
        config: 'config.rb',
        bundleExec: true,
        force: true
      },
      dev: {
        options: {
          environment: 'development'
        }
      },
      dist: {
        options: {
          environment: 'production'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-shell');

  grunt.registerTask('build', [
    'uglify:dist',
    'compass:dist',
    'jshint'
  ]);

};

UPDATE: Here is my config.rb:

saved = environment
if (environment.nil?)
  environment = :development
else
  environment = saved
end

# Location of the theme's resources.
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
generated_images_dir = images_dir + "/generated"
javascripts_dir = "js"

# Require any additional compass plugins installed on your system.
require 'compass-normalize'
require 'rgbapng'
require 'toolkit'
require 'singularitygs'
require 'sass-globbing'

##
## You probably don't need to edit anything below this.
##


output_style = (environment == :production) ? :expanded : :nested

line_comments = (environment == :production) ? false : true


sass_options = (environment == :production) ? {} : {:debug_info => false} #MH  - turned off debugging - doesn't seem to be rendering properly

add_import_path 'sass'

How do I fix this?

Upvotes: 2

Views: 2443

Answers (2)

paraS elixiR
paraS elixiR

Reputation: 2704

Faced same issue while using grunt-sass ( Grunt sass compilation was working fine with grunt-contrib-sass) 

Running "sass:build" (sass) task

Error: Undefined variable: "$size". on line 135 of output/xxx_core/cartridge/static/default/css/scss/helpers/_mixins.scss

*/ --^ Warning: Use --force to continue.

Aborted due to warnings. enter code here

File naming was totally correct. After hours of debugging I found that if I removed the commented code from scss file which in my case was 

/*
@mixin arialFont($size, $lineHeight, $family) {
   font: #{$size}/#{$lineHeight} $family
} 
*/

Sass compilation started working with grunt-sass as well

Upvotes: 0

PeterA
PeterA

Reputation: 121

I will answer your 'only compile the base scss file'.

You have two options here:

1) Add underscore to the filenames, which you don't want to compile (only import)

  • you name it as "_someImportedFile.scss"
  • you import it in your base.scss as @import "someImportedFile"; (without underscore)

For more info take a look on SASS Documentation section 7.1.1. Partials

2) Update your Gruntfile and use 'specify' option:

compass: {
    dev: {
        options: {
            sassDir: 'sass',
            cssDir: 'css',
            environment: 'development',
            specify: 'base.scss'
        }
   }
}

P.S. Is there any reason you watch css files? Also if you use 'config.rb' share it.

Hope it helps, Cheers.

Upvotes: 7

Related Questions