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"]
Related
I have a huge stylesheet codebase with many .scss files in multiple folders and subfolders that I want to compile to .css files. So far so good.
But for whatever reason I need the .css files to be compiled into a different destination folder than the .scss files in each source folder.
The source paths I have:
src/project-1/scss/project-1.scss
src/project-2/subfolder/scss/project-2.scss
The destination paths I need:
src/project-1/css/project-1.css
src/project-2/subfolder/css/project-2.css
My grunt task setup is this:
sass: {
prod: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'src',
src: ['**/*.scss'],
dest: 'src',
ext: '.css',
}]
}
}
This setup compiles each .css file to the same folder as the .scss files. I need them out from the "scss" folder and into a "css" folder in the same parent folder.
Searching for a solution:
I tried different values in the dest field without any luck.
I tried using grunt-contrib-copy and a rename() function:
copy: {
target: {
files: [{
expand: true,
cwd: 'src',
src: ['**/*.css'],
dest: 'src/',
rename: function(dest, src) {
return dest + src.replace(/\/scss\/$/, "/css/");
}
}]
}
}
The latter "almost" works. I am copying the files to their own destination and at the same time trying to rename the "scss" folder to "css", but the replace function doesn't seem to concider the folder names in the source path, only the file names.
Am I close to a workaround or am I heading towards a dead end here?
EDIT: solution found
I did some small changes to the rename function which solved my problem:
sass: {
prod: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: "src",
src: ["**/*.scss"],
dest: "src/",
ext: ".css",
rename: function (dest, src) {
return dest + src.replace('scss', 'css'); // The target file is written to folder "css" instead of "scss" by renaming the folder
}
}]
}
}
This is giving me the compiled CSS inside a new /css folder on the same level as the source /scss folder.
For example:
src/project-1/scss/project-1.scss is compiled to src/project-1/css/project-1.css.
I am also using the exact same files: [{...}] settings for my grunt-autoprefixer and grunt-contrib-cssmin tasks, and it all writes to the same folder and file.
I want grunt to compile sass every time grunt is executed if my Sass files haven't changed. Sometimes the watcher fails to detect if the compiled result is different from the existing CSS file, and the only way to force it to compile is by editing one of the Sass files.
Grunt file:
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/**/*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: false
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
grunt.registerTask('default', [
'browserSync',
'sass',
'watch',
]);
Simply register sass as a task to run when you type grunt.
If you do this and the sass files are still not giving you the results you want, then you need to revisit your sass task and make sure you're piping the files where you want them to go.
More cool options:
newer: When you run grunt you want sass to compile to CSS only if there is a difference between the new CSS and the old. In that case, try grunt-newer. Appending newer:taskyouwanttorun:option will work.
watch:sass: You want sass to compile during a watch based on something besides changing one of the sass files. Easy, just set up a watch task that looks for whatever file you want to modify, image/javascript/html/whatever and set the task as sass
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 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.
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