I'm trying to use sass with grunt and I'm having a weird behavior.
If I create any file with underscore it doesn't work anymore, and it doesn't import either.
That is my Gruntfile, really simple:
module.exports = function(grunt) {
'use strict';
require('load-grunt-tasks')(grunt);
grunt.initConfig({
watch: {
sass: {
files: 'scss/**/*.{scss,sass}',
tasks: ['sass']
}
},
sass: {
example: {
options: {
outputStyle: 'expanded'
},
files: {
'public/css/app.css': 'scss/**/*.{scss,sass}'
}
}
}
});
grunt.registerTask('default', ['watch']);
};
If I create a file, for example, application.scss in scss/, it works and creates the file app.css in public/css, but if I create any file with underscore, for instance: _variables in scss/ it doesn't work anymore, it doesn't create the file or changes anything and it doesn't import either.
application.scss:
#import "variables";
body {
background-color: $bg-color;
}
_variables.scss:
$bg-color: red;
Files with names starting with an underscore are considered as partial in the eyes of SASS. This means that SASS would not make an actual css file out of them. To prevent this, either create an index.scss file and import your partials in it or remove the underscore from their names.
Official DOcs
I solved it by using:
files: [{
expand: true,
cwd: 'scss',
src: '**/*.{scss,sass}',
dest: 'public/css',
ext: '.css'
}]
Related
(Beginner post)
I used Grunt for this tree :
Gruntfile.js :
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'css/style.css': 'Component/**/*.scss',
}
}
},
watch: {
css: {
files: 'Component/**/*.scss',
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
It runs without any errors, but it don't take any file. The style.css still empty.
When I replace this line :
files: {
'css/style.css': 'Component/**/*.scss',
}
with :
files: {
'css/style.css': 'Component/header/header.scss',
}
Its takes the .css file in header/ correctly.
I don't have any error with either of these two syntaxes.
Any idea ?
You need to use the grunt files pattern to get all the files recursively in the sources folder:
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'Component/',
src: ['**/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
},
watch: {
css: {
files: ['Component/**/*.scss'],
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
To use Grunt file patterns you need to specify an object with options instead of the default setting in the form of 'destination': 'source'. The file pattern object has the following options:
{
// source directory
cwd: String,
// creates the subdirectories or flatten the content to the destination directory
flatten: Boolean,
// remove anything and after the file extension and replace with the ext String
ext: String,
// destination folder
dest: String,
// source file pattern using minimatch to match files
src: String|Array
}
More about Grunt file patterns and minimatch file matching patterns.
Edit to achieve the desired result (have all the components compiled in to a single file), you will need to do the following:
Change the filenames of all of your components, for example change Component/header/header.scss to Component/header/_header.scss. Files prefixed with _ will not create any output (Sass default behavior).
Then create a bootstrap file (let's call is style.scss, containing only the reference to the files you want to merge in to your output css file. For each file add #import 'header/header'; for header/_header.scss. You don't need to add the extension or the _ prefix.
Change the files definition of you sass:dist task to: { 'css/style.css' : ['Component/style.scss'] }
Gruntfile.js will now look like this:
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: { 'css/style.css' : ['Component/style.scss'] }
}
},
watch: {
css: {
files: ['Component/**/*.scss'],
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
That will compile Component/style.scss (containing the reference to all your components files) in to css/style.css.
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I find Web Essentials autoprefixer not auto enough - I need to manually say it to add prefixes. Also it doesn't offer me prefixes when I'm writing .less or .scss.
Is there any extension or option to make it automatically add prefixes on css compilation from .less or .scss stage?
I've tried Web Compiler extension, but it doesn't support prefixing for sass, and says that it supports prefixing for less, but I've tried enabling autoprefix in compilerconfig.json while writing .less and it didn't add anything.
Is there something for visual studio? Or maybe I should dump it and use some editor + gulp?
I'm sure there will be an extension out there but it isn't too much work to create a Grunt/Gulp file to do your compiling for you. Task Runner Explorer will then manage the running of the file. Writing your own will give you the control and the flexibility that an extension will not.
Here is a sample using Grunt, taken from my post on the subject Getting started with Grunt, SASS and Task Runner Explorer
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};
I have made a grunt task to run compass as follows:
module.exports = {
dev: {
options: {
sassDir: ['**/*.scss'],
cssDir: 'stylesheets',
noLineComments: false,
outputStyle: 'compressed'
}
}
}
My watch task is as follows:
module.exports = {
jade: {
files: 'app/views/**/*.jade',
tasks: ['jade']
},
src: {
files: '**/*.scss',
tasks: ['compass:dev']
},
options: {
livereload: true,
},
}
However I get Compass can't find any Sass files to compile.
My folder structure is as follows:
scss/
stylesheets/
Gruntfile.js
grunt/
aliases.yaml
compass.js
watch.js
You can create a file called config.rb in the same leval as gruntfile.js**
Reference
then you can tell where the compass will look for the sass files:
css_dir = 'assets/stylesheets' #where find the css
sass_dir = 'assets/sass' #where find sass files
images_dir = 'assets/images' #where find the images (if you want to use then in css as well)
You don't need to change the code.
I am struggling to understand how I can pass a partial filename from the grunt command line, in order to run a task (from an installed grunt module) on a particular file.
What I want to be able to do is configure a series of tasks to take filename parameter from the command line.
I've tried reworking the final example on this page http://chrisawren.com/posts/Advanced-Grunt-tooling but I'm kind of stabbing in the dark a bit. Thought someone would have a quick answer.
Here is my Gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
globalConfig: globalConfig,
uglify: {
js: {
options: {
mangle: true
},
files: {
'js/<%= globalConfig.file %>.min.js': ['js/<%= globalConfig.file %>.js']
}
}
},
});
// Load tasks so we can use them
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('go', 'Runs a task on a specified file', function (fileName){
globalConfig.file = fileName;
grunt.task.run('uglify:js');
});
};
I attempt to run it from the command line like this:
grunt go:app
to target js/app.js
I get this error:
Aborted due to warnings.
roberts-mbp:150212 - Grunt Tasks robthwaites$ grunt go:app
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: globalConfig is not defined
Warning: Task "go:app" not found. Use --force to continue.
Thanks
you can use grunt.option.
your grunt register task will look like this.
> grunt.option('fileName'); grunt.registerTask('go', 'Runs a task on a
> specified file', function (){
> grunt.task.run('uglify:js');
> });
your grunt configuration will be
module.exports = function (grunt) {
var fileName=grunt.option('fileName');
grunt.initConfig({
uglify: {
js: {
options: {
mangle: true
},
files: {
'js/fileName.min.js': ['js/fileName.js']
}
}
},
});
command to run the task from terminal:
$ grunt go --fileName='xyzfile'
I the end I was able to accomplish what I wanted like this, but not sure if this is a standard way.
What I was failing to do was declare the globalConfig variable globally first, so that I could redefine it from the Terminal as I ran my grunt task.
Here is an example. When working with HTML emails I need to:
Process my sass files to css (grunt-contrib-sass)
Run an autoprefixer on the resulting css (grunt-autoprefixer)
Minify my CSS and remove CSS comments (grunt-contrib-cssmin)
Include my full CSS in a tag the of my html file (using grunt-include-replace)
Finally, run premailer on the file to inline all styles (grunt-premailer)
The point is, if I am working on several different HTMl emails in the same project, I need to be able to run all these tasks on html files one-by-one, as needed. The Gruntfile below allows me to do this.
What this does:
If you enter into terminal grunt It will simply run the sass task, which processes all sass files - no file parameter needed from Terminal.
However, if I wish to run a series of processes on a single html file, I enter grunt process:fileName with fileName being the name of the html file without the .html extension.
You will notice that the only tasks that require the fileName are actually include-replace and premailer. However, I still want to run al the other CSS cleanup tasks prior to targetting my chosen file.
The key is:
Declaring the global variable
Load the globalConfig variables into the grunt.initConfig
Use the grunt variable declaration where needed in your tasks
register your custom task, with the fileName variable being used as a paramater.
Hope that helps someone.
module.exports = function (grunt) {
var globalConfig = {
file: 'index' // this is the default value, for a single project.
}
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// load the globalConfig variables
globalConfig: globalConfig,
sass: {
dev: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'css',
ext: '.css'
}]
}
},
cssmin: {
options: {
keepSpecialComments: 0,
keepBreaks: true,
advanced: false
},
target: {
files: [{
expand: true,
cwd: 'css',
src: '*.css',
dest: 'css',
ext: '.css'
}]
}
},
autoprefixer: {
css: {
src: "css/*.css"
}
},
includereplace: {
your_target: {
options: {
prefix: '\\/\\* ',
suffix: ' \\*\\/',
},
files: {
'inline/<%= globalConfig.file %>-inline.html': ['<%= globalConfig.file %>.html']
}
}
},
premailer: {
main: {
options: {
verbose: true,
preserveStyles: true,
},
src: 'inline/<%= globalConfig.file %>-inline.html',
dest: 'inline/<%= globalConfig.file %>-inline.html'
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-premailer');
grunt.registerTask('default', 'sass');
grunt.registerTask('process', 'Runs all processing tasks on a specific file to produce inlined file', function (fileName) {
globalConfig.file = fileName;
grunt.task.run('sass', 'autoprefixer', 'cssmin', 'includereplace', 'premailer');
});
}
EDIT: Obviously at the moment this accepts only one parameter I beleive. In other use cases the grunt.option version above could give more functionality, being able to submit several parameters in one command. I will continue to experiment with grunt.option if I find the need to do this.