1

My Imports are not imported in the outputted main.css file, normally main.css should be filled with the css of bootstrap, fontawesome, animate etecetera...

but they are showing up like this @import "bootstrap.min.css";@import "font-awesome.min.css";@import "animate.css";...

This is my gruntfile.js

module.exports = function (grunt)
{
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');

    var userConfig = require( './build.config.js' );

    var taskConfig = {
        watch: {
            styles: {
                files: ['<%= less_dir %>/**/*.less'], // which files to watch
                tasks: [ 'less'],
                options: {
                    nospawn: true
                }
            }
        },

        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    "<%= css_dir %>/main.css": "<%= less_dir %>/main.less"
                }
            }
        }
    };


    grunt.initConfig( grunt.util._.extend( taskConfig, userConfig ) );

};

My main.less

/* - Imports - */
@import "bootstrap.min.css";
@import "font-awesome.min.css";
@import "animate.css";
@import "variables";
ekclone
  • 1,030
  • 2
  • 17
  • 39

1 Answers1

0

Okay, I got it fixed! I'm going to answer my own question so If you random stranger have the same problem you only have to change the filename from *.css to *.less to actually trigger grunt-contrib-less to import your stylesheet

So bootstrap.min.css to bootstrap.min.less / etc...

ekclone
  • 1,030
  • 2
  • 17
  • 39
  • Don't rename, use either `(inline)` or `(less)` instead. – seven-phases-max Aug 06 '15 at 10:34
  • I have tried that but It seems to only work on the Original Less, not grunt-contrib-less – ekclone Aug 06 '15 at 11:03
  • `grunt-contrib-less` uses exactly the same compiler code as "original" one so it can be no difference. Re-check (also considering your very ancient `gruntfile.js` snippet above - none of three less options used there are valid anymore - make sure you use an up-to-date `grunt-contrib-less` version and not some hello from the middle ages). – seven-phases-max Aug 06 '15 at 11:40
  • Could you explain the part "Ancient gruntfile.js"? – ekclone Aug 06 '15 at 12:10
  • By now neither `yuicompress` nor `optimization` options have any effect (they were removed more than two years ago). And `compress` is also deprecated (as it is incompatible with recent CSS developments and to be removed at any moment). – seven-phases-max Aug 06 '15 at 12:39
  • Wow I didn't know about that, could you direct me somewhere where I can see the new functions that could be useful for me for less? – ekclone Aug 07 '15 at 10:19
  • Well, all currently valid `grunt-contrib-less` options are documented right at https://github.com/gruntjs/grunt-contrib-less#options. These options map to the native Less compiler lib options documented [there](http://lesscss.org/usage/#command-line-usage-options) (different names are used because of different console/JS naming conventions). And finally `lessc --help` also lists all currently available options (including warnings about deprecated stuff). – seven-phases-max Aug 07 '15 at 11:14