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 assumed that to work too. It might be a bug in grunt. Feel free to open a ticket.
You can use multiple targets to work around it in the meantime:
sass: {
options: {
style: 'expanded'
},
dev: {
files: [{
expand: true,
cwd: '/scss/',
src: '*.scss',
dest: '/css',
ext: '.css'
}]
},
dev2: {
files: [{'style.css': 'style.scss'}]
}
}
Related
Looking for hours, still no luck.. Tried to run a very old Gruntfile (with imagemin and sass) which used to work. Imagemin is working, sass is not.
The error it throws is:
Could not find an option named "include-paths".
Warning: Exited with error code 64 Use --force to continue.
Aborted due to warnings.
I installed npm. I installed grunt-contrib-sass. I have sass & ruby installed.
where sass gives:
C:\Users..\AppData\Roaming\npm\sass
C:\Users..\AppData\Roaming\npm\sass.cmd
where ruby gives:
C:\Ruby26-x64\bin\ruby.exe
This is a snippet of my Gruntfile, in case you need extra info, I will put it in completely:
sass: {
peter: {
options: {
compress: false,
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'peter/css2/',
src: ['**/*.scss'],
dest: 'peter/',
ext: '.css'
}]
},
sots: {
options: {
compress: false,
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'sots/css2/',
src: ['**/*.scss'],
dest: 'sots/',
ext: '.css'
}]
}
},
options: {
includePaths: ['bower_components/foundation/scss']
},
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-newer');
//require('jit-grunt')(grunt);
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['newer:imagemin', 'sass', 'build']);
}
Never mind, threw out grunt-contrib-sass and replaced it by node-sass
How set up different tasks of grunt-contrid-sass for dev and prod?
I need different css-files - with and without sourcemaps.
I tried:
sass: {
dev: {
options: {
sourcemap: 'inline',
},
},
prod: {
options: {
sourcemap: 'none',
},
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
But in this case sass:dev task doesn't compile any files.
When I try:
sass: {
dev: {
options: {
sourcemap: 'inline',
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
prod: {
options: {
sourcemap: 'none',
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
}
I get a warning with suggestion to use "--force". But even with using "--force" I get no compiled files.
Is there any way to do it?
Your second example is close to what it should be. However the value of each files property should be an Array which contains an Object as shown in this example in the docs.
For instance, it should be:
files: [{
//...
}]
and NOT:
files: {
//...
}
Change your saas task to the following instead:
sass: {
dev: {
options: {
sourcemap: 'inline'
},
files: [{ // <-- change this
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
}] // <-- change this
},
prod: {
options: {
sourcemap: 'none'
},
files: [{ // <-- change this
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
}] // <-- change this
}
}
EDIT
Note: You should also consider changing your dest path in either the dev or prod targets (or both) because currently they are the same path, i.e. if you run both sass:prod and sass:dev the output from one task will overwritten by the other.
Hi all,
Following this question : https://github.com/gruntjs/grunt-contrib-sass/issues/190
I'm trying to specify the 'dest' option depending on the 'src' one.
The only difference is the /scss that has to be removed.
Here is a sample of my current code :
sass: {
dist: {
options: {
style: 'expanded',
sourcemap: 'none',
trace: true,
},
files: {
'./css/laptop.css': './scss/css/laptop.scss',
....
... (160 more lines)
....
'./css/player.css': './scss/css/player.scss'
}
}
},
I tried
files: [{
expand: true,
src: ['**/*.scss'],
dest: function(path) { return path.replace(/(\/scss)/,"") },
ext: '.css'
}]
But apparently Warning: Arguments to path.join must be strings Use --force to continue.
Thanks!
After some research I discovered grunt-newer which can be used this way:
css:{
files: [
'./scss/**'
],
tasks: ['newer:sass'],
livereload: {
options: { livereload: true },
files: ['./**'],
},
}
It's not what I was trying to do exactly but It optimised perfectly the grunt process. Really nice plugin!!
My Grunt setup is using sass to compile my .scss files to src/.css and cssmin to combine and minify my src/.css files to main.css.
I want to use the new sourcemap feature in SASS, but I'm not sure if it will really do anything for me considering cssmin will be putting all my css files into the main.css.
Does anyone have any insight into this?
I'm also, for now trying to turn off the sourcemap in grunt-contrib-sass and it won't take. Here's the relevant code in my Gruntfile.js:
sass: {
dist: {
options: {
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'stylesheets/scss',
src: ['**/*.scss'],
dest: 'stylesheets/src',
ext: '.css'
}]
}
},
from: github.com/gruntjs/grunt-contrib-sass
I just had this problem and the other solutions didn't help me. Here's how I fixed it:
options: {
"sourcemap=none": ''
}
Using sass version 3.4.2, and npm update didn't help
I ran into the same problem. As suggested in the above comment by #imjared, updating grunt-contrib-watch and grunt-contrib-sass did the trick.
https://www.npmjs.org/doc/cli/npm-update.html
Adding sourceMap: true as below solved the problem for me (NB: I'm using grunt.loadNpmTasks('grunt.sass')):
sass: {
options: {
includePaths: ['bower_components/foundation/scss'],
imagePath: '/images'
},
dist: {
options: {
outputStyle: 'nested',
sourceMap: true
},
files: [{
expand: true,
cwd: 'scss',
src: ['[^_]*.scss'],
dest: '../public/css/',
ext: '.css'
}]
}
}
Hope that helps someone.
I am just getting started with Grunt and am a bit confused about how to configure my gruntfile.js to recognize changes to sass partial files. I've followed the article on 24ways.org by Chris Coyier and feel pretty comfortable with the basics. When running grunt watch, I can make changes to my style.scss file and grunt will watch and compile changes. However, I typically use style.scss as a long list of #imports:
#import 'partials/partialfilename';
When I make a change to any of my partials grunt does not notice anything has changed and thus nothing is compiled.
Within my project directory I have a sass directory that includes a style.scss file and a partials directory with lots of partials.
here is my grunt file:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/custom.js',
'js/foundation.js',
'js/jquery.listnav.js',
'js/jquery.ioslider.min.js'
],
dest: 'js/build-scripts.js',
}
},
uglify: {
build: {
src: 'js/build-scripts.js',
dest: 'js/build-scripts-min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
},
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
},
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
images: {
files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);
};
I have tried a few different options for the watch css arguments such as:
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
and
css: {
files: ['sass/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
I realize that I may be 'missing the point' here, I have read a bit about the grunt sass plugin 'ignoring' (_) underscores or partials because of the sass globbing rule (?) and through my research I have noticed that most people are using compass in their projects which I am not.
So, again my question is: How can I configure grunt to watch and compile changes to my sass partials and compile my css correctly?
I have found a solution.
css: {
files: ['sass/*.scss'],
files: ['sass/partials/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}