gruntjs / grunt-contrib-sass Goto Github PK

Even with the 'trace' option on, I can't tell which file is offending this plugin. It would be superhelpfulawesome if I knew which file to look at. Am I missing a config setting or something?

My config:

sass: {
        options: {
            style: 'compact',
            trace: true
        },
        dev: {
            files: { '<%= yeoman.dev %>/all-min.css': '<%= tidepool.sassSourceGlob %>' }
        },
        dist: {
            files: { '<%= yeoman.dist %>/all-min.css': '<%= tidepool.sassSourceGlob %>' }
        }
    },

Command line output:

(sass):17: Invalid CSS after "": expected expression (e.g. 1px, bold), was "#" (Sass::SyntaxError)
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/scss/parser.rb:1146:in `expected'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/lexer.rb:199:in `expected!'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:471:in `assert_expr'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:49:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:166:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script.rb:31:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:881:in `parse_script'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:627:in `parse_variable'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:562:in `parse_line'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:471:in `build_tree'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:490:in `block in append_children'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:489:in `each'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:489:in `append_children'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:345:in `_to_tree'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:315:in `_render'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:262:in `render'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:338:in `process_result'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:41:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:21:in `parse!'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/bin/sass:9:in `<top (required)>'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/bin/sass:23:in `load'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/bin/sass:23:in `<main>'


Warning: (sass):17: Invalid CSS after "": expected expression (e.g. 1px, bold), was "#" (Sass::SyntaxError)
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/scss/parser.rb:1146:in `expected'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/lexer.rb:199:in `expected!'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:471:in `assert_expr'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:49:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script/parser.rb:166:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/script.rb:31:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:881:in `parse_script'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:627:in `parse_variable'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:562:in `parse_line'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:471:in `build_tree'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:490:in `block in append_children'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:489:in `each'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:489:in `append_children'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:345:in `_to_tree'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:315:in `_render'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/engine.rb:262:in `render'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:338:in `process_result'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:41:in `parse'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/lib/sass/exec.rb:21:in `parse!'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/lib/ruby/gems/2.0.0/gems/sass-3.2.8/bin/sass:9:in `<top (required)>'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/bin/sass:23:in `load'
from /Users/EricWorks/.rbenv/versions/2.0.0-p0/bin/sass:23:in `<main>' Use --force to continue.

I've installed RubyInstaller for Windows (the "Ruby 2.0.0-p247 (x64)" version) and then ran gem install sass. After that, I've ran your Grunt plugin and got this message:

Warning: You need to have Ruby and Sass installed and in your PATH for this task to work.

I've checked the value of PATH (echo %PATH%) and, indeed, Ruby was not in there. I had to add it manually:

set PATH=C:\Ruby200-x64\bin;%PATH%

Now, your Grunt plugin works for me.

So, since it appears that, on Windows, one has to manually add Ruby to PATH in order for your Grunt plugin to work, consider adding a note in your README file with information how to do this.

Hi,

I'm getting warnings that complain of undefined mixin when it IS defined.
I have mixins declared throughout my imported files with no issues. But I recently created a new file to import specifically for buttons.
I can use mixins in the main file but not the imported files within the main application sass file.
The buttons imported file is included before all of these.

The code compiles to a css file where the mixin has been used, but i get the following error in my console.

timreed@local ../Zone.NikeFoundation.4.8.1[master *%>]$ grunt
Running "sass:dev" (sass) task
WARNING on line 8 of /Volumes/VM_Sites/Nike/the-girl-effect/Zone.NikeFoundation.4.8.1/Zone.NikeFoundation.4.8.1/sass/_guide.scss: ".nike_tips" failed to @extend "clearfix".
  The selector "clearfix" was not found.
  This will be an error in future releases of Sass.
  Use "@extend clearfix !optional" if the extend should be able to fail.

Syntax error: Undefined mixin 'blackbutton'.
        on line 15 of /Volumes/VM_Sites/Nike/the-girl-effect/Zone.NikeFoundation.4.8.1/Zone.NikeFoundation.4.8.1/sass/_common-elements.scss, in `blackbutton'
        from line 15 of /Volumes/VM_Sites/Nike/the-girl-effect/Zone.NikeFoundation.4.8.1/Zone.NikeFoundation.4.8.1/sass/_common-elements.scss
        from line 18 of standard input
  Use --trace for backtrace.
Warning: Syntax error: Undefined mixin 'blackbutton'.
        on line 15 of /Volumes/VM_Sites/Nike/the-girl-effect/Zone.NikeFoundation.4.8.1/Zone.NikeFoundation.4.8.1/sass/_common-elements.scss, in `blackbutton'
        from line 15 of /Volumes/VM_Sites/Nike/the-girl-effect/Zone.NikeFoundation.4.8.1/Zone.NikeFoundation.4.8.1/sass/_common-elements.scss
        from line 18 of standard input
  Use --trace for backtrace. Use --force to continue.

Aborted due to warnings.

Hope that's not too hard to follow - I've had trouble trying to pin it down!
Can you shed any light?

Best,
Tim

as the title says~

Hi, I'm trying to work out how to compile a single file as well as a directory and for the life of me I cannot get it to work.

sass: {
  dev: {
    options: {
      style: 'expanded'
    },
    files: [
    {'style.css': 'style.scss'},
    {
      expand: true,
      cwd: '/scss/',
      src: '*.scss',
      dest: '/css',
      ext: '.css'
    }]
  }
}

This only seems to compile the style.css and ignores the directory.

Because of WordPress' weird requirements, having the style.css file separate (one level up) from the CSS directory is quite common. An example would also be useful for compiling multiple directories too.

It could be great not to specify the input or/and output files. I'd like to do something like that:

files: {
   'www/css': 'app/styles/*.scss' // (or ['app/styles/*.scss',  'app/styles/others/*.scss'])
}

The input configuration already works but the output says to me "error: it's a directory".

Is it possible to define a variable as the destination for a file object?

    var destDir = "dist/css/ns.large.css",
       sourceLessLarge = "/src/css/ns.large.scss";

  ns_large_css: {
    files: {
      destDir  : sourceLessLarge
    }
  }

This results in a file called destDir being created in the root of my project.

Is this a known issue?

It seems like we're requiring all sass files to be re-read and processed by sass every time this task runs.

When used during development with watch does this means every time a sass file is changed the entire collection needs to be re-read off the HD and re-processed by sass?

If so this seems like a potential performance hit for sites with a lot of sass code.

I'm very new to sass and don't know what the right solution is for this.

Here's the current link:

http://gembundler.com/man/bundle-exec.1.html

I'd love to release this week, but I have a few usability concerns.

This is what happens if you don't have sass installed (on OSX, anyway):

Running "sass:compile" (sass) task
execvp(): No such file or directory

events.js:66
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: write EPIPE
    at errnoException (net.js:768:11)
    at Object.afterWrite (net.js:592:19)
npm ERR! Test failed.  See above for more details.
npm ERR! not ok code 0

That's pretty esoteric!

Could we get something a little more helpful in place? If not logging what to do directly in the error output, perhaps a link to the readme for this task? Also, the README should contain instructions on how to get set up with sass on windows/linux/osx, or a link to relevant instructions.

Otherwise, this looks great! Thanks Sindre :)

Uses libsass, includes pre-compiled binaries for popular platforms, is probably 1000x faster and easier to set up than the current solution.

https://github.com/andrew/node-sass

(haven't used it myself)

Hello,

I am sorry to bring the problem here cause I think it's not an issue, I just can't find the answer to the problem. I've been goggling and through forums for days now. Kind of desparated.

I am trying to compile scss file using the grunt-contrib-sass plugin (with grunt v0.4.0). The compiled result is an empty css file, but if through Sass, already installed on my pc, it works fine. Below are the base.scss, Gruntfile.js and package.json files.

base.scss

$color: #000;

header{
color: $color;  
}

Gruntfile.js

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
    // Metadata.
    pkg: grunt.file.readJSON('package.json'),       
    sass: {
        dist: {
            options: { style: "expanded", trace: true },
            files: { "base.css": "base.scss" }
        }       
    }
});

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

// Default task.
grunt.registerTask("default", [""]);
grunt.registerTask("sass--",["sass"]);
};

package.json

{
"name": "my_grunt",
"version": "1.0.0",
"description": "New to Grunt",
"main": "index.js",
"scripts": {
    "test": "test"
},
"repository": {
    "type": "git",
    "url": "none"

},
"keywords": [
        "none"
],
"author": "none",
"license": "BSD",
"devDependencies": {
        "grunt-contrib-sass": "~0.2.2"
}
}

Result:

Either I run the sass command "grunt sass" or "grunt sass--", the result is just an empty css file without any errors.

Your help is greatly appreciated

Niusaul

Some Grunt api changes such as this.files instead of this.file break the plugin.

Add the sourcemap option when the feature lands in Sass stable.

I'm getting a lot of random issues like 1/3 of the time I save a file (using a watch config). Sometimes happen during first build so not related to watch I think.

Using v0.4.1.

Warning: Errno::ENOENT: No such file or directory - ./.sass-cache/a2bcc5caa8ce244248ac392bcdf3cb6fa5e06e10/_listing.scssc
      Use --trace for backtrace. Use --force to continue.

Any idea why ?

I'm wondering if there are any repercussions for running sass in parallel. This is a whole performance bump when running the sass task for many files.

I see in

    grunt.util.async.forEachSeries(this.files, function(f, next) {

I can understand there will be issues if some of the sass tasks are writing to files that are input files for other sass tasks but that seem very unlikely. Some questions that might help in this decision:

1. Are there a cases where a user runs sass on a .css file?
2. Are there cases where within the same task as user writes and reads from the same file?

The answer to the first question is could be maybe since running sass on css can still return a valid css file.

As for question 2, I'm hoping that that this type of task definition/configuration would be highly discouraged (or even considered invalid). Why? Because it relies on the ordering of the keys in order to be deterministic. node.js respects insertion order for keys, but this shouldn't be relied upon.

This is an easy one liner fix to support an option for running it in parallel with a limit of 10. An async or parallel option can used.

    grunt.util.async.forEachLimit(this.files, 10, function(f, next) {

node warns of a memory leak if it is set to anything higher than 10, but that's a separate issue.

In my project that requires 55 destination css files (it's a big project), this decreased the task's running time from 14 seconds to 3 seconds.

Hi I have the following in grunt file:

options: {
style: 'expanded',
debugInfo: true
},
files: {
'style.css': 'css/main.scss'
}

but am getting a font family output instead of the line number in style.css

-sass-debug-info{filename{font-family:file://c:/xampp/htdocs/website/css/_nav.scss}line{font-family:\0000334}}

I was just reading through the plugin out of interest in pulling a default sass configuration for testdouble/lineman, and one question I have is: how do users lock to a specific version of sass for their project?

Most Ruby developers use Bundler to lock their project to a specific version, but it doesn't look like there's a smart way to use Bundler for requiring sass here (besides the fact that it'd be awkward to include a Gemfile, Gemfile.lock, and bundle step into an otherwise non-ruby project).

As an alternative, perhaps it would be appropriate to specify in the task configuration an allowed version range for the ruby sass gem, and throw an error if sass --version doesn't return a compatible version. Otherwise developers and build servers are at risk of generating subtly different CSS depending on the machine that was running the grunt task.

Thoughts?

In the case where several tasks have --compass flag enabled, and if a config.rb file is available, it will then be used by every target having {options: {compass: true} }.

As some paths may be different according to each target, the easiest way to deal with that would be to deal with ruby conditions within the config.rb.

For example

//Gruntfile.js

    sass: {
      "targetA": {
        files: {
          "src/moduleA/main.css": "src/moduleA/main.scss"
        }
      "targetB": {
        files: {
          "src/moduleB/main.css": ["src/moduleB/main.scss", "src/moduleC/extend.scss"]
        }
      },
      options: {
        compass: true,
        sourcemap: true,
        loadPath: "src/resources/sass"
      }

And then (I write few ruby code so it's more important to focus on the idea than on the exact syntax):

//config.rb

case env.grunt.task
  when `targetA`
    sass_dir = "src/moduleA"
    css_dir = "src/moduleA"
  when /^target[a-zA-Z]+/
    sass_dir = "src/modules-common"
    css_dir = "src/modules"
    images_dir = "src/resources"
    http_path = "../"
    http_images_path = "../common"
end

I'm trying to setup SASS in my grunt project but I keep receiving the following error when running a target:

Running "sass:build" (sass) task
Warning: This socket is closed. Use --force to continue.

Aborted due to warnings.

All my other tasks work fine: uglify, concat, compress, jslint, etc. I'm assuming this is more of a Ruby error and not Sass, but no amount of Googling has solved my problem.

Here is the gruntfile: https://github.com/titon/Toolkit/blob/master/Gruntfile.js

I'm using Window 7 + Cygwin + command prompt when running grunt. I know sass works outside of grunt because I use scout and the command line daily.

Any help would be appreciated.

https://github.com/percolatestudio/league compiles fine, no warnings with compass, but fails with grunt-contrib-sass, as follows. I hope this makes useful test data.

Warning: Syntax error: Invalid CSS after "elements-of-type": expected selector, was "(html5-block)"
on line 114 of /usr/share/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss, in reset-html5' from line 32 of /usr/share/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss, inglobal-reset'
from line 3 of /usr/share/compass/frameworks/compass/stylesheets/compass/_reset.scss
from line 4 of standard input
Use --trace for backtrace. Use --force to continue.

Aborted due to warnings.

Here is my Gruntfile I added:

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
loadPath: '/usr/share/compass/frameworks/compass/stylesheets/'
},
files: {
'client/style.css': 'client/style.scss'
}
}
}
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['sass']);
};

when i use like this :

'files:{
'./public/css/style-min.css':['./develop/{,/,//}.{scss,sass}']
}'

it seem always compile the first sass file, but i want it compile the all sass files, how should i do ?,,

Here is what is happening:

Here is the sass part of my grunt file:

sass: {
    dist: {
      files: {
        'html/css/catalog.css': 'html/sass/catalog.scss',
        'html/css/detail.css': 'html/sass/detail.scss',
        'html/css/style.css': 'html/sass/style.scss'
      }
    }
  },

Is this related to this issue: #10 ?

Anyway since I am modifying one js file, and I have specified to sass compile only the given files, why is the task even starting up?

This is painful because even for no files to compile the sass task takes around 5 second to complete (on windows) and this means that I have this painful waiting period before I can test my changes. :(

--update is the equivalent of --watch but only runs once. Adding it will allow users to specify files or directories to be compiled by Sass, which would greatly improve the author experience on projects with more than two or three sass files.

See gruntjs/grunt-contrib-compass#26. I think this should be documented in both places

Hi,

If I'm not mistaken, it's not possible to configure compass. I would like to change images_dir value for spriting 👍

Thanks!

I am running, what I believe to be the latest Grunt.

grunt --version

grunt-cli v0.1.6
grunt v0.4.0a

My Gruntfile contains

sass: {
  production: {
    files: {
      './public/stylesheets/blue.css': './app/assets/stylesheets/blue.scss',
      './public/stylesheets/green.css': './app/assets/stylesheets/green.scss',
      './public/stylesheets/purple.css': './app/assets/stylesheets/purple.scss'
    }
  },
  development: {
    options: {
      style: 'expanded',
      lineNumbers: true
    },
    files: {
      './public/stylesheets/blue.css': './app/assets/stylesheets/blue.scss',
      './public/stylesheets/green.css': './app/assets/stylesheets/green.scss',
      './public/stylesheets/purple.css': './app/assets/stylesheets/purple.scss'
    }
  }
}

and running the command grunt sass:development gives me the following error.

Running "sass:development" (sass) task
<WARN> Object ./app/assets/stylesheets/blue.scss has no method 'filter' Use --force to continue. </WARN>

Aborted due to warnings.

Any idea what I could be doing incorrectly?

I get the following error when running grunt. I am new to grunt and I dont know how to get past this error.

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: assets/stylesheets/application.scss -> public/stylesheets/application.css
Warning: Cannot read property 'src' of undefined Use --force to continue.

Aborted due to warnings.

I using grunt 0.4.0rc8.

Here is my Gruntfile.js

module.exports = function(grunt) {
  'use strict';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'public/stylesheets/application.css': ['assets/stylesheets/application.scss']
        },
      },
    },

  // Load necessary plugins
  grunt.loadNpmTasks('grunt-contrib-sass');

  grunt.registerTask('default', 'sass');
};

Thanks.

I have a grunt build, which works flawlessly. Recently I decided to add grunt-contrib-sass to the mix.

Machine

Windows 7 Ultimate N 32 bit PC

Gruntfile.js

grunt.config.init({
    ...
    sass: {
        dev: {                           
            files: {
                '../src/theme/css/theme.css': '../src/theme/scss/theme.scss'
            }
        }
    }
    ...
});

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

package.json

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-requirejs": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.0",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-contrib-sass": "~0.3.0"
},
"optionalDependencies": {},
"engines": {
    "node": "*"
}

Output

D:\==Owner==\My Projects\Personal\Tutorial\tools>grunt sass --verbose
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK

Registering "grunt-contrib-sass" local Npm module tasks.
Reading D:\==Owner==\My Projects\Personal\Tutorial\tools\node_modules\grunt-contrib-sass\package.json...OK
Parsing D:\==Owner==\My Projects\Personal\Tutorial\tools\node_modules\grunt-contrib-sass\package.json...OK
Loading "sass.js" tasks...OK
+ sass
Loading "Gruntfile.js" tasks...OK
+ default

Running tasks: sass

Running "sass" task

Running "sass:dev" (sass) task
Verifying property sass.dev exists in config...OK
Files: ../src/theme/scss/theme.scss -> ../src/theme/css/theme.css
Options: (none)
Reading ../src/theme/scss/theme.scss...OK
Writing ../src/theme/css/theme.css...OK
'D:\' is not recognized as an internal or external command,
operable program or batch file.
Warning: 'D:\' is not recognized as an internal or external command,
operable program or batch file. Use --force to continue.

Aborted due to warnings.

Notes

I have Ruby, sass ruby gem installed and working properly from the same directory when using either:

sass ../src/theme/scss/theme.scss:../src/theme/css/theme.css

or

sass --watch ../src/theme/scss/theme.scss:../src/theme/css/theme.css

The latter outputs:

>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: D:/==Owner==/My Projects/Personal/Tutorial/src/theme/scss/theme.scss
  overwrite ../src/theme/css/theme.css

All paths variables on my machine use / and not \.

I suspect that it has something to do with paths resolution of contrib-sass, either during installation or execution.

Any ideas?

Thank you.

files{
  'css/main.css': ['a.scss', 'b.scss', 'c.scss']
}

right?

or

How to use @import to concat files? My result:

@import url(a.scss);
@import url(b.scss);
@import url(c.scss);

First off thanks for the work on this project. I've setup a grunt task using grunt-contrib-sass which is working well. The project uses compass so I've pointed it at the config.rb file. When the task runs I'm getting errors like

WARNING: 'bg.png' was not found (or cannot be read) in ./images

grunt-contrib-sass seems to be ignoring all my options inside of config.rb

http_images_path = "/img"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

and instead just using the defaults. Is this a know problem or am I doing something wrong. I know there is another project called grunt-contrib-compas am I meant to be using that, what's the difference between the two projects if this project also supports compass?

Hi,

I'm using grunt-contrib-sass ~0.3.0 and the following is my Gruntfile Sass task...

sass: {
    dist: {
        options: {
            style: 'compressed',
            require: ['./app/styles/sass/helpers/url64.rb']
        },
        expand: true,
        cwd: './app/styles/sass/',
        src: ['*.scss'],
        dest: './app/styles/',
        ext: '.css'
    },
    dev: {
        options: {
            style: 'expanded',
            debugInfo: true,
            lineNumbers: true,
            require: ['./app/styles/sass/helpers/url64.rb']
        },
        expand: true,
        cwd: './app/styles/sass/',
        src: ['*.scss'],
        dest: './app/styles/',
        ext: '.css'
    }
},

...the compiled sass:dev CSS doesn't look to be displaying the debugging information correctly.

Here is my Sass content...

body {
    border: 10px solid blue;
    p {
        border: 10px solid green;
    }
}

...and here is the output...

@media -sass-debug-info{filename{}line{font-family:\000031}}
body {
  border: 10px solid blue;
}
@media -sass-debug-info{filename{}line{font-family:\000033}}
body p {
  border: 10px solid green;
}

...that looks broken to me.

The numbers after the first 3 are the actual line number for that particular rule but things like the filename aren't displayed?

Is this just a bug that needs to be fixed (not sure if this is a Sass bug or a Grunt-Sass plugin bug) or have I missed something my side?

Thanks.

M.

This is not a bug, but a suggestion:

The Ruby Sass compiler has been fairly slow in my experience. There is a C based compiler, libsass, that now has Node bindings thanks to this project.

Perhaps consider a switch?

I'm running a stripped down grunt config with nothing but sass and I'm getting this error:

Warning: Object #<Object> has no method 'helper' Use --force to continue.

Here's the gruntfile I'm using: https://gist.github.com/4018050

I'm on grunt 0.4.0a and using the current head of grunt-contrib-sass, v0.1.3.

So how is it that this grunt-contrib task came to be using Ruby despite all of the opposition in gruntjs/grunt-contrib#12?

I know Sindre has grunt-sass, which utilizes node-sass but that also doesn't explicitly support Windows (see sindresorhus/grunt-sass#7) due to intermittent support for Windows in node-sass... which I'm confused about: looking at sass/node-sass#10, looks like this should've been covered by PRs sass/node-sass#31 and sass/node-sass#82.

cc: @tkellen @sindresorhus @teabass @deanmao

UPDATE: Correction: @andrew (not @teabass)

Hello,

I have error when running same code on a window environment. It works fine on a MAC. Here are my files:

Gruntfile.js

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: { style: "expanded", trace: true },
files: { "build/css/illicoweb.css": "src/scss/illicoweb.scss" }
}
}
});

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

        // Default task.
        grunt.registerTask("default", [""]);
        grunt.registerTask("sass--",["sass"]);

};

package.json

{
"name": "illico",
"version": "1.0.0",
"description": "illicoweb on Grunt",
"devDependencies": {
"grunt-contrib-watch": "~0.3.1",
"grunt-contrib-sass": "~0.2.2",
"grunt-contrib-copy": "~0.4.0",
"grunt-contrib-concat": "~0.1.3",
"grunt-contrib-uglify": "~0.1.2"
}
}

Verbose on command > grunt sass-- --verbose

Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK

Registering "grunt-contrib-sass" local Npm module tasks.
Reading c:\workspaces\DEV\Grunt\node_modules\grunt-contrib-sass\package.json...OK
Parsing c:\workspaces\DEV\Grunt\node_modules\grunt-contrib-sass\package.json...OK
Loading "sass.js" tasks...OK

• sass
  Loading "Gruntfile.js" tasks...OK
• default, sass--

Running tasks: sass--

Running "sass--" task

Running "sass" task

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: src/scss/illicoweb.scss -> build/css/illicoweb.css
Options: style="expanded", trace
Reading src/scss/illicoweb.scss...OK
Writing build/css/illicoweb.css...OK
c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:163:in initialize': No such file or directory - build/css/illicoweb.css (Errno::ENOENT) from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:163:inopen'
from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:163:in open_file' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:111:inprocess_result'
from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:308:in process_result' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:41:inparse'
from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:21:in parse!' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/bin/sass:9:in<top (required)>'
from c:/Ruby193/bin/sass:23:in load' from c:/Ruby193/bin/sass:23:in

Your help is greatly appreciated

Thank you
Niusaul

In the grunt docs it says:

cwd All src matches are relative to (but don't include) this path.

When I configure my sass task like this:

files: [{
  expand: true,
  cwd: ['sass/'],
  src: ['**/*.sass'],
  dest: 'css/',
  ext: '.css'
}]

a new folder sass is created inside of css.

I want everything inside of sass to be compiled to css, e.g.

sass/main.sass                => css/main.css
sass/component/component.sass => css/component/component.css

I have the same settings for grunt-contrib-coffee which works as expected.

files: [{
  expand: true,
  cwd: ['coffee/'],
  src: ['**/*.coffee'],
  dest: 'js/',
  ext: '.js'
}]

Hi,

It would be nice if wildcards were allowed in file list, as in

files: {
          'public/css/*.css' : 'sources/compass/*.scss'
        }

previous code does not work, it creates a *.css file instead of various named files.

Thank you

Hi,

This grunt config works at the office on a Mac Lion while it fails at home on a Snow Leopard. That's the only difference I can think of.

node v0.8.12
grunt v0.3.17
├─┬ [email protected]
│ └── [email protected]

Here is the config:

module.exports = function (grunt) {

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

    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    'styles/css/base.css': 'styles/sass/base.scss'
                }
            }
        },
    });

    // Default task.
    grunt.registerTask('default', 'sass');

};

And the error:

Running "sass:dist" (sass) task

TypeError: Object #<Object> has no method 'options'
    at Object.module.exports (/Users/romuald/Documents/devserver/workspace/PROJECT/node_modules/grunt-contrib-sass/tasks/sass.js:16:24)
    at Object.task.registerMultiTask.thisTask (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:109:15)
    at Object.task.registerTask.thisTask.fn (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:58:16)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:343:36)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:319:9)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:346:11)
    at Task.start (/usr/local/lib/node_modules/grunt/lib/util/task.js:359:5)
    at Object.grunt.tasks (/usr/local/lib/node_modules/grunt/lib/grunt.js:143:8)
    at Object.module.exports [as cli] (/usr/local/lib/node_modules/grunt/lib/grunt/cli.js:36:9)
    at Object.<anonymous> (/usr/local/lib/node_modules/grunt/bin/grunt:19:14)

Any idea?

Romu

I need someone to help update this plugin to work with grunt 0.4.0rc5.

I had to revert the whole file src-dest mappings implicit iteration abstraction per gruntjs/grunt#606, and once again, multi tasks have to iterate over this.files manually. In addition, there's a new this.filesSrc array that contains a reduced, uniqued set of all matched src files in case the task is read-only and only cares about source files.

See:

• this comment for a description of the changes made.
• grunt-contrib-jshint for an example using the this.filesSrc array.
• grunt-contrib-concat for an example using the this.files array.

Notes:

• A user may specify a new option nonull in addition to src to tell grunt to keep patterns or filepaths that don't actually match files. Because of this, the task shouldn't explode if a nonexistent src filepath is encountered. I handle this in the grunt-contrib-concat by warning if not grunt.file.exists but not failing the task.

Guidelines for updating / publishing this plugin:

• Change this project's version number to one ending in "rc5" so that it's clearer that it works with grunt 0.4.0rc5. If the existing version number doesn't end in an "a" or "rc" increment the patch version. Eg, jshint went from 0.1.0 -> 0.1.1rc5
• Ensure grunt 0.4.0rc5-compatible plugins are specified in package.json devDependencies like this (grunt-contrib-internal can be "*")
• Update the CHANGELOG like this
• Regenerate the README.md file via grunt.
• Delete node_modules, run npm cache clean and re-run npm install to test.
• Publish to npm using --tag=master (not latest)

Well it seems to be common for grunt plugins but still. I didn't have sass installed and instead of error like sass compiler not found I saw this:

>grunt sass
Running "sass:foundation" (sass) task

Done, without errors.

Why do you hide errors?!

Here is the part in my grunt file:

sass: {
  dist: {
    files: {
      'main.css': 'main.scss'
    }
  }
},

Trying to run grunt:

[C:\wamp\www\b3c]grunt.cmd
Running "lint:files" (lint) task
Lint free.

Running "sass:dist" (sass) task

TypeError: Object #<Object> has no method 'options'
    at Object.module.exports (C:\wamp\www\b3c\node_modules\grunt-contrib-sass\tasks\sass.js:16:24)
    at Object.task.registerMultiTask.thisTask (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\grunt\task.js:109:15)
    at Object.task.registerTask.thisTask.fn (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\grunt\task.js:58:16)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:343:36)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:319:9)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:346:11)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:319:9)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:346:11)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:319:9)
    at Task.<anonymous> (C:\Users\Niyaz\AppData\Roaming\npm\node_modules\grunt\lib\util\task.js:346:11)

Using 0.4.0 I'm getting this issue

Running "sass:dist" (sass) task
Warning: Arguments to path.join must be strings Use --force to continue.

when running grunt sass with the following Gruntfile.coffee:

#global module:false
module.exports = (grunt) ->

  grunt.initConfig
    pkg: grunt.file.readJSON('package.json')

    sass:
      dist:
        files:
          'public/css/app.css': 'app/app.scss'

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

Switching to 0.3.0 instead and it works again.

It would be great to have an option to put a banner at the top of the rendered file

options:{
  banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
  style: 'expanded'
},

Since Compass is a boolean, you must currently place your config.rb wherever you are running grunt from. This does not allow for a user to rename their config file nor does it allow for the config file to be placed in a config directory.

Hi,

Below is my Gruntfile (I'm using 0.4.0rc2 at the moment). I'm trying to 'watch' my Sass files so I don't have to manually run either grunt or grunt sass to compile changes in my Sass file. Can any one demonstrate in my below set-up how to do that?

Thanks.

module.exports = function (grunt) {

  /*
      Grunt set-up:
        npm install -g grunt-cli
        npm install -g grunt-init
        npm init

      Requirements: 
        npm install grunt@devel --save-dev
        npm install grunt-contrib-watch --save-dev
        npm install grunt-contrib-jshint --save-dev
            At time of testing I needed more up to date version of jshint: npm install https://github.com/gruntjs/grunt-contrib-jshint/archive/7fd70e86c5a8d489095fa81589d95dccb8eb3a46.tar.gz --save-dev
        npm install grunt-contrib-uglify --save-dev
        npm install grunt-contrib-requirejs --save-dev
        npm install grunt-contrib-sass --save-dev
        npm install grunt-contrib-imagemin --save-dev
        npm install grunt-contrib-htmlmin --save-dev

   */

  // Project configuration.
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    jshint: {
      files: ['Gruntfile.js', 'app/**/*.js', '!app/release/**', 'modules/**/*.js'],
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true,

        globals: {
          module: true,
          require: true,
          requirejs: true,
          jQuery: true,
          console: true,
          define: true
        }
      }
    },

    watch: {
      files: '<%= jshint.files %> <%= sass.dev.files %>',
      tasks: 'default'
    },

    requirejs: {
      compile: {
        options: {
          baseUrl: './app',
          mainConfigFile: './app/main.js',
          dir: './app/release/',
          modules: [
            {
              name: 'main'
            }
          ]
        }
      }
    },

    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          './app/styles/main.css': './app/styles/sass/main.scss'
        }
      },
      dev: {
        options: {
          style: 'expanded'
        },
        files: {
          './app/styles/main.css': './app/styles/sass/main.scss'
        }
      }
    }

  });

  // Load NPM Tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');

  // Default Task
  grunt.registerTask('default', ['jshint', 'sass']);

  // Release Task
  grunt.registerTask('release', ['requirejs']);
};

To elaborate on the issue I'm having, if I run grunt watch then I see the message Running "watch" task Waiting...

If I then update my JS files so there is an error, nothing is flagged up on the CLI. But if I edit the line in my grunt file to not point to any Sass files. e.g. change

watch: {
      files: '<%= jshint.files %>  <%= sass.dev.files %>',
      tasks: 'default'
    }

to

watch: {
      files: '<%= jshint.files %>',
      tasks: 'default'
    }

...then run grunt watch again, this time any JS errors are picked up as they should be.

But nothing I do seems to get the Sass files to be re-compiled when the .scss is updated?

I come from grunt-contrib-compass and I used to use a .rb file in order not to be depending to grunt, so I specified for instance /config/compass_dev.rb, /config/compass_ie.rb, /config/compass_dist.rb depending on what environment I am.

Instead on only saying compass: true, could we have another option to specify where is the compass config file?

Hi,
I'm trying to install this task without success.
Here is my conf :

ruby 1.8.7 (2011-06-30 patchlevel 352) [x86_64-linux]
Sass 3.2.9 (Media Mark)

And here is the npm-debug.log file : https://gist.github.com/xseignard/5648972

Any idea of what's wrong here?

Regards,

Xavier

Would be great if alongside source maps there was the ability to support Sass Globbing (really handy for doing batch imports of low level library files where specificity is not an issue).