1

My main less file @ private/less/app.less 

@import 'a.less';
@import 'b.css';

which is importing:
private/less/a.less
& private/less/b.css

My grunt file:

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            development: {
                options: {
                    paths: ["/css"],
                    yuicompress: true
                },
                files: {
                    "public/css/app.css": "private/less/app.less"
                }
            },
        },

        // running `grunt watch` will watch for changes
        watch: {
            less: {
                files: ['private/less/**/*.less'],
                tasks: ['less'],
                options: {
                    spawn: false
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['less', 'watch']);

};

My jade file has this for an import statement:

link(rel='stylesheet' href='css/app.css')

CSS Output @ public/css/app.css

// all the a.less styles ....
@import 'b.css';

which is giving me the error that the file isn't found because it's using the css @import method.

Anyone have any suggestions for ways of importing .css files in a .less file that's compiled with grunt-contrib-less?

Bryan Grace
  • 1,826
  • 2
  • 16
  • 29

1 Answers1

4

You can force less to import the css file as an less file regardless of the extension by using @import (less)

@import 'a.less';
@import (less) 'b.css';

which results in

// all the a.less styles ....
// all the b.css styles ....

Ref: import options: less

Use @import (less) to treat imported files as Less, regardless of file extension.

Pete TNT
  • 8,293
  • 4
  • 36
  • 45