1

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'));
    });
Christian Gollhardt
  • 16,510
  • 17
  • 74
  • 111
  • Can you post the code from your Gulpfile's less task? – Andrew Faulkner Aug 29 '16 at 08:21
  • Also, what's the result when you directly compile using lessc in the terminal? I.E. does this give the expected result, or do you have the same issue? – Andrew Faulkner Aug 29 '16 at 08:23
  • I have added my gulpfile @AndrewFaulkner. Not sure how to do the last one. I use Visual Studio. – Christian Gollhardt Aug 29 '16 at 08:27
  • Fair enough. Alright, try this: open a terminal. Navigate to the project root. Run this command: npm install -g less ... then this command: lessc ./path/to/your/less/file.less. (Since you're not a terminal guy I'll admit that might be a bit tricky, but it's worth a shot) – Andrew Faulkner Aug 29 '16 at 08:37
  • Also, how did you install less and bootstrap less in the project? i.e. was it through npm, bower, manual download (directly dropping downloaded files into a styles folder), or some other method? – Andrew Faulkner Aug 29 '16 at 08:44

1 Answers1

1

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.
Andrew Faulkner
  • 3,662
  • 3
  • 21
  • 24
  • Thanks, I take a look into it. Seems like number 3 is most likely the case. I use the latest gulp-less version (NPM package json `"gulp-less": "*"`), and the bootstrap.css/less files are from the same download (3.3.6, because the Template is not uptodate with 3.3.7) – Christian Gollhardt Aug 29 '16 at 08:54
  • Ack, lock your version! You're going to cause yourself a lot of pain later if you don't. (That's probably not related to your current issue, but it's a good idea nonetheless) – Andrew Faulkner Aug 29 '16 at 08:59
  • Hm...check that bootstrap-less isn't also installed in your project. import 'bootstrap'; could be defaulting to node_modules/bootstrap-less rather than node_modules/bootstrap/[/*?]bootstrap.less – Andrew Faulkner Aug 29 '16 at 09:05
  • Yes, it is number 3. Seems like I need to think about an other strategy then. Thank you. – Christian Gollhardt Aug 29 '16 at 09:19