gruntjs / grunt-contrib-sass Goto Github PK
View Code? Open in Web Editor NEWCompile Sass to CSS.
Home Page: http://gruntjs.com/
License: MIT License
Compile Sass to CSS.
Home Page: http://gruntjs.com/
License: MIT License
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. :(
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?!
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.
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
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
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'
},
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 ?,,
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);
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 :)
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.
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)
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-contrib-sass/tasks/sass.js
Line 21 in aa0f821
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:
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.
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.
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
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:in
open'
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:in
process_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:in
parse'
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
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:in
open'open_file' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:111:in
process_result'process_result' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/exec.rb:41:in
parse'parse!' from c:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.2.7/bin/sass:9:in
<top (required)>'load' from c:/Ruby193/bin/sass:23:in
' Use --force to continue.
Your help is greatly appreciated
Thank you
Niusaul
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.filesSrc
array.this.files
array.Notes:
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:
"*"
)README.md
file via grunt.node_modules
, run npm cache clean
and re-run npm install
to test.--tag=master
(not latest
)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.
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?
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
Some Grunt api changes such as this.files
instead of this.file
break the plugin.
--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.
as the title says~
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".
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
Here's the current link:
In the grunt docs it says:
cwd
Allsrc
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 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}}
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 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'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 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.
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?
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.
I have a grunt build, which works flawlessly. Recently I decided to add grunt-contrib-sass to the mix.
Windows 7 Ultimate N 32 bit PC
grunt.config.init({
...
sass: {
dev: {
files: {
'../src/theme/css/theme.css': '../src/theme/scss/theme.scss'
}
}
}
...
});
grunt.loadNpmTasks('grunt-contrib-sass');
"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": "*"
}
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.
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.
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, in
global-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.
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']);
};
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.
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?
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
Hi,
If I'm not mistaken, it's not possible to configure compass. I would like to change images_dir
value for spriting ๐
Thanks!
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)
Add the sourcemap
option when the feature lands in Sass stable.
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?
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?
See gruntjs/grunt-contrib-compass#26. I think this should be documented in both places
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.
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.
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.
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
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)
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.