gruntjs / grunt-contrib-compass

Compile Compass to CSS.
http://gruntjs.com/
MIT License
626 stars 128 forks source link

sassDir and cssDir do not accept a Function #226

Closed pcole0083 closed 9 years ago

pcole0083 commented 9 years ago

Currently the sassDir and the cssDir options only accept Strings. I'd like to be able to use Functions that return Strings as well. This came about as I have been developing a generic Gruntfile.js that I can use across projects and the theme name is the same as my package name. Simply put I require access to the package properties.

For example:

var compassConfig = {
    dist: {
        options: {
            outputStyle: 'expanded',
            sassDir: function(){
                return "skin/frontend/community/"+grunt.config.get('pkg').name+"/scss";
            },
            cssDir: function(){
                return "skin/frontend/community/"+grunt.config.get('pkg').name+"/css";
            }
        }
    }
};

I have a solution that I am currently using and would like contribute what I have done to this project.

grunt: ^0.4.5 grunt-contrib-compass: ^1.0.1

If you need more details please let me know. Thanks.

sindresorhus commented 9 years ago

You can already do this using grunt templating. Read the grunt docs.

cssDir: "skin/frontend/community/<%= pkg.name %>/css"
pcole0083 commented 9 years ago

When I use the grunt templating, I get the following message:

Running "compass:dist" (compass) task
Compass can't find any Sass files to compile.
Is your compass configuration correct?.
If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

Here is my wider look at my Gruntfile setup:

    (function(module, undefined){
        "use strict";
        module.exports = function(grunt) {
            var packageFile = 'package.json'; //node package file. Do not edit!

            var compassConfig = {
                dist: {
                    options: {
                        outputStyle: 'expanded',
                        sassDir: "skin/frontend/community/<%= pkg.name %>/scss";
                        cssDir: "skin/frontend/community/<%= pkg.name %>/css"; 
                    }
                }
            };

            var watchList = {...}; //watch task configuration
            var lintConfig = {...}; //csslint configuration

            grunt.initConfig({
                pkg:            grunt.file.readJSON(packageFile),
                watch:         watchList,
                compass:    compassConfig,
                csslint:        lintOpts
            });

            grunt.loadNpmTasks('grunt-contrib-watch');
            grunt.loadNpmTasks('grunt-contrib-compass');
            grunt.loadNpmTasks('grunt-contrib-csslint');

            grunt.registerTask('default', ['watch']); //Register the default tasks
        };
})(module);

It's because of the error message when using grunt templating that I then switched to trying to use functions.

pcole0083 commented 9 years ago

Ah it seems I was extracting my file path too far. I had the sassDir and cssDir saved as variables so that I could use them my watch task, csslint, and my compass tasks. However I had saved the <%= pkg.name %> to it's own seperate variable, and used that in my config string instead of using <%= pkg.name %> directly.