twitter-bootstraplessgulp-less

How to compile bootstrap to get the same version as precompiled?


I bought a template. If I try to compile it with the precompiled version of bootstrap everything is fine.

@import "bootstrap.css"; //Precompiled Bootstrap
@import "nifty/nifty.less"; //My theme

However, If I will compile the bootstrap less variant, some colors are other then expected:

@import "bootstrap/bootstrap.less"; //Same Version as above, but not precompiled
@import "nifty/nifty.less"; //My theme

What is the difference. How should I compile bootstrap, to have the exact same result as the precompiled variant in the dist folder in terms of colors?

I need this, because I need to compile my template together with Kendo UI and my template provides not every theme variable I need for Kendo UI Bootstrap Mapper.


This is my gulp task:

gulp.task('theme',
    function () {
        return gulp.src('./Content/less/theme.less')
          .pipe(plumber())
          .pipe(less({
              paths: [path.join(__dirname, 'less', 'includes')]
          }))
          .pipe(gulp.dest('./Content/theme'));
    });

Solution

  • There are a few possible issues here:

    1. You may not have equivalent Bootstrap CSS and Bootstrap less versions installed in your project. Ensure the version listed at the top of your bootstrap.css file is the same as the one at the top of bootstrap.less. This is the most likely cause - it's easy for these to get out of step.
    2. Ensure you have the most recent gulp-less version. The plugin had some reported issues with import handling in the past that have since been fixed.
    3. Gulp-less may not be respecting your import 'order' - there have been problems reported with this in the past. If this is the issue, you're in for a bit of a rough time. However, there's a hackish solution you can use if this is the case: grab and render the bootstrap library files directly with gulp, output them into a css file in your 'sources' (e.g. styles/lib/bootstrap), then import the outputted css file. Only do this as an absolute last resort - it's a major, major hack.
    4. The template itself may include a different version of Bootstrap from the one you have installed. Check the template to see what dependencies it has.