Question

我买了一个模板。如果我尝试用预编译版本的bootstrap编译它，一切都很好。

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

但是，如果我将编译bootstrap less变量，则某些颜色是预期的其他颜色：

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

有什么区别。我应该如何编译bootstrap，以便在颜色方面与dist文件夹中的预编译变体具有完全相同的结果？

我需要这个，因为我需要与Kendo UI一起编译我的模板，而我的模板并不提供Kendo UI Bootstrap Mapper所需的每个主题变量。

这是我的一项任务：

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'));
    });

Answer 1

这里有一些可能的问题：

您的项目中可能没有安装等效的Bootstrap CSS和Bootstrap版本。确保bootstrap.css文件顶部列出的版本与bootstrap.less顶部的版本相同。这是最可能的原因 - 这些原因很容易失控。
确保您拥有最新的gulp-less版本。该插件在过去曾有一些已报告的导入处理问题已被修复。
Gulp-less可能不尊重您的进口订单＆＃39; - 过去曾有过这方面的问题。如果这是问题，那么您将陷入困境。但是，如果是这种情况，您可以使用一个hackish解决方案：直接使用gulp抓取并呈现引导库文件，将它们输出到您的“源”中的css文件中。（例如styles / lib / bootstrap），然后导入输出的css文件。这只是绝对的最后手段 - 它是一个主要的主要黑客。
模板本身可能包含与您安装的Bootstrap不同版本的Bootstrap。检查模板以查看它具有的依赖关系。

如何编译bootstrap以获得与预编译相同的版本？

1 个答案: