I am trying to run a Sass task with Grunt.
My config is :
grunt.initConfig({
sass: {
dist: {
files: [{
src: [
'app/assets/css/sass/*.scss'
],
dest: 'app/assets/css',
ext: '.css'
}]
}
}
});
I get an "EISDIR: Is a directory - app/assets/css" error.
I checked many answers and have been trying to resolve that for 2 hours. The directory exists, and I have tried with the full path (C:/...), and using backslashes instead. Same error.
Running sass without grunt works fine.
I think you are missing the trailing slash for dest to indicate a directory rather than a file.
Also (missed in first edit), add expand to enable dynamic file objects.
this
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
src: [
'app/assets/css/sass/*.scss'
],
dest: 'app/assets/css/',
ext: '.css'
}]
}
}
});
instead of this
grunt.initConfig({
sass: {
dist: {
files: [{
src: [
'app/assets/css/sass/*.scss'
],
dest: 'app/assets/css',
ext: '.css'
}]
}
}
});
edit: added expand:true to the original answer and kept the trailing slash on dest.
In my case, although I had implemented the recommendations made in the approved solution (Matthew), I still faced the same issue.
In fact, some previous instances of Ruby were still running in background. I killed them in the task manager (I am on Windows 7) and the issue disappeared.
Related
I switched from grunt-contrib-sass to grunt-dart-sass, and now when I run the dart-sass task it runs without errors but no CSS files are generated in my dist folder. The file paths appear to be correct and it appears to be finding all the various file paths, so I'm kinda stumped as to why no CSS files are being created.
My Grunt config:
'dart-sass': {
main: {
options: {
style: 'compressed',
lineNumbers: false,
cacheLocation: 'src/assets/sass/.sass-cache',
includePaths: ['node_modules']
},
files: [{
expand: true,
cwd: 'src/assets/sass/',
src: ['**/*.scss'],
dest: 'dist/assets/css/',
ext: '.css'
}]
}
}
Output when I run grunt dart-sass -v:
Running tasks: dart-sass
Running "dart-sass" task
Running "dart-sass:main" (dart-sass) task
Verifying property dart-sass.main exists in config...OK
Files: src/assets/sass/_settings.scss -> dist/assets/css/_settings.css
Files: src/assets/sass/_structures.scss -> dist/assets/css/_structures.css
Files: src/assets/sass/main.scss -> dist/assets/css/main.css
Options: style="compressed", lineNumbers=false, cacheLocation="src/assets/sass/.sass-cache", includePaths=["node_modules"]
I have a directory structure of:
views
_static_
some.js
somesass.scss
something.jade
I was hoping to do something like this:
sass: {
dist: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'views',
src: ['*/*.scss'],
flatten: true,
dest: 'views/*/_static_',
ext: '.css'
}]
}
},
If I just do dest: 'views' and remove flatten:true then it, at least, puts it in the same folder the .scss file is in, but I can't figure out how to say "ok, add '_static_' to the cwd of the current file and place the .css in there." How/can I do that with grunt-contrib-sass?
If wondering why I'm not just throwing all the compiled CSS into one directory, it's because this is for an experimentation server for myself, so I'm not minifying or anything.
In order to get the sub-folder into the path I had to use rename: function(dest, src){ .. }, but things didn't work as I would assume. First off, flatten is not what is wanted so we can get at the parent directory through src. The other thing to be aware of is that src inside rename: will have whatever.css as the file, even if the src outside is defined as ['*/*.scss']. That works in our favor, but tripped me up because I expected to see whatever.scss. I still need to go back and work on it some, but this got the job done for me:
sass: {
dist: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'views',
src: ['*/*.scss'],
rename: function(dest, src) {
// src will have .css extension, not scss.
var splitPath = src.split('/');
// Leaves the path preceding the filename in splitPath.
var filename = splitPath.pop();
// There shouldn't be any other subdirectories,
// but added j.i.c. until I can come back to it.
var joinedPath = splitPath.join("/");
var customDest = this.cwd + '/' + joinedPath + '/_static_/' + filename;
return customDest;
},
ext: '.css'
}]
}
The end result is:
views
_static_
some.js
somesass.css (ends up at the custom location after running grunt sass)
somesass.scss (the source Sass)
something.jade
I started using gruntjs today. Created all the required files etc.
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: "\n"
},
dist: {
src: ['js/lib/*.js','js/main.js'],
dest: 'js/script.js'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: { // Dictionary of files
'css/style.css': 'css/style.scss' // 'destination': 'source'
}
}
},
uglify: {
options: {
sourceMap : true,
mangle : false
},
my_target: {
files: {
'js/script.min.js': ['js/script.js']
}
}
},
watch: {
css: {
files: ['css/*.scss'],
tasks: ['sass']
},
scripts: {
files: ['js/lib/*.js','js/youtube.js','js/main.js'],
tasks: ['concat', 'uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['watch']);
};
and it works fine. But there is one little thing in my PHPstorm (running under osx):
GruntJS really makes the changes but they are not uploaded to the server I'm mapped to. I have the Automatic Upload and 'Upload External Changes' checked but still, nothing happens.
Could you somehow help me?
Thanks in advance!
P.s While using the PHPStorm file watchers (scss watcher), the 'Upload External Changes' was working and the files were uploading to server, but after switching to GruntJS the problem occurred.
BTW, File > Synchronize solves the problem, as it reloads the files and then the 'Upload external changes' works, but that's not a very good solution as it's not automatic.
Also, switching the window probably makes PHPStorm synchronize files and this also helps.
Anyway, I'm in search of better solution..
I was using older (v8) version of PHPStorm.
In PHPStorm 10 Problem is solved !!!
I am trying to compile .scss files of a Prestashop template locally using grunt-contrib-sass. It is configured as following:
sass: {
dist: {
files: [{
expand: true,
cwd: '_theme/themes/swat-theme/sass',
src: ['*.scss'],
dest: '../css',
ext: '.css'
}]
}
},
but I get the following error message:
error file to import not found or unreadable: compass
on line 1 of _theme/themes/swat-theme/sass/addresses.scss
I found out I had to install compass on my Windows 7 PC, which I did with gem install compass. All went fine. I checked with compass --version and it returns 1.0.3.
But, when I run grunt sass again, I still get the same error message. The beginning of the addresses.scss file is:
#import "compass";
#import "theme_variables";
How can I solve that issue?
I solved this issue by adding an option:
sass: {
dist: {
options: {
compass: true
},
files: [{
expand: true,
cwd: '_theme/themes/swat-theme/sass',
src: ['*.scss'],
dest: '../css',
ext: '.css'
}]
}
},
I'm new to Grunt. I thought I'd give it a try, so I created this grunt file.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
css: {
src: [
'./css/*'
],
dest: './css/all.css'
},
js: {
src: [
'./js/*'
],
dest: './js/all.js'
}
},
uglify: {
js: {
files: {
'./js/build/all.min.js': ['./js/all.js']
}
}
},
sass: {
build: {
files: [{
expand: true,
cwd: './css/sass',
src: ['*.scss'],
dest: './css',
ext: '.css'
}]
}
},
cssmin: {
css: {
src: './css/all.css',
dest: './css/build/all.min.css'
}
},
watch: {
files: ['./css/sass/*', './js/*'],
tasks: ['sass:build','concat:css', 'cssmin:css', 'concat:js', 'uglify:js']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('dev', ['sass:build','concat:css', 'cssmin:css', 'concat:js', 'uglify:js']);
};
When I run 'grunt watch' and make a change to an .scss file, terminal complains and then aborts.
Running "watch" task
Waiting...
>> File "css/sass/all.scss" changed.
Running "sass:build" (sass) task
File css/all.css created.
Running "concat:css" (concat) task
Warning: Unable to read "./css/build" file (Error code: EISDIR). Use --force to continue.
Aborted due to warnings.
Completed in 1.276s at Thu May 01 2014 23:53:59 GMT+0100 (BST) - Waiting...
Please can someone point out where I'm going wrong?
It looks to be with the concat:css - but there's no reference to the build directory there.
I believe it may be because certain tasks are colliding and files aren't ready yet to be worked with perhaps? Is there an order to tasks?
Please bear with me as it's all new!
Thanks,
Michael.
I notice this is quite old, but I'll add an answer for posterity.
This was happening to me because of a missing variable in the SASS file.
Try adding "--force" onto your grunt command. The build will still fail, but you will probably get a more helpful error message.
try to add the nospawn: true option into de the sass task options.
Also if you want to have a more complete error response you could run grunt --verbose