The CSS preprocessors has evolved a lot over the past few years. One of the major “problems” that people and I have regarding preprocessors is the inability to see where your CSS rules come from when inspecting elements with developer tools, and specially when you have a lot of LESS files.
First of all, you’ll need to make sure that the task runner grunt and the grunt-contrib-less dependency are running and less is the version that supports Source Maps. Next activate your ‘Sources’, ‘Enable CSS source maps’ on your browser.
Now the: package.json
|
1 2 3 4 |
"dependencies": { "grunt": "~0.4.2", "grunt-contrib-less": "~0.10.0" // needs to be >0.9.0 } |
A fully working ‘Gruntfile.js’ and ‘Source Maps’:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
module.exports = function(grunt) { 'use strict'; grunt.initConfig({ // Metadata. meta: { basePath: '../', srcPath: '../src/', deployPath: '../deploy/', jasmine: 'tests/jasmine/', root: '/Users/Leo/Documents/root/rcv', www: '/Users/Leo/Documents/root/rcv/www' }, // debugging: grunt less:development less: { // name module development: { options: { compress: true, // To enable, set sourceMap to true and update sourceMapRootpath based on your install // sourceMap needs grunt-contrib-less > 0.9.0 sourceMap: true, sourceMapFilename: 'css/main.css.map', // where file is generated and located sourceMapURL: '/rcv/css/main.css.map', sourceMapRootpath: '/rcv/' }, files: { // target.css file: source.less file '<%= meta.root %>/css/devices.css': './less/devices.less', '<%= meta.root %>/css/core.css': './less/core.less', '<%= meta.root %>/css/portfolio.css': './less/portfolio.less' } } }, // Linting of JS files. jshint: { options: { // Specifying JSHint options and globals jshintrc: '.jshintrc' }, files: ['Gruntfile.js', './js/**/*.js'] }, jasmine: { pivotal: { src: '<%= jasmine =>/src/**/*.js', options: { specs: '<%= jasmine =>/spec/*Spec.js', helpers: '<%= jasmine =>/spec/*Helper.js' } } }, watch: { // Watch for LESS changes, building CSS directly styles: { // Which files to watch (all .less files recursively in the less directory) files: ['<%= meta.root %>/less/**/*.less'], tasks: ['less'], options: { nospawn: true } }, // Watch for JS changes, linting the JS and copying direct to deployment directory. scripts: { files: ['Gruntfile.js', 'server.js', '<%= meta.www %>/**/*.js', '<%= meta.www %>/tests/**/*.js'], tasks: ['less::development', 'jshint'] } } }); // Load required modules grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-jasmine'); // Task definitions grunt.registerTask('default', ['watch','jshint']); }; |
Posible mistakes
map is not generated
check http://localhost:8888/rcv/css/main.css.map or where you setup up the map file
Destination not written because no source files were found
double check the:
|
1 2 3 4 5 6 7 8 |
... files: { / target.css file: source.less file '<%= meta.root %>/css/devices.css': './less/devices.less', '<%= meta.root %>/css/core.css': './less/core.less', '<%= meta.root %>/css/portfolio.css': './less/portfolio.less' } ... |
map is generated but still showing the .CSS
Activate the ‘Sources’, ‘Enable CSS source maps’ on your browser.
Validate if you are using the latest sourceMap; we needs grunt-contrib-less > 0.9.0
check the source code on
Final result
