在 Meteor 应用程序中实现 Bootstrap 模板答案

【问题标题】：Implementing a Bootstrap template inside Meteor app在 Meteor 应用程序中实现 Bootstrap 模板
【发布时间】：2015-02-24 21:56:16
【问题描述】：

我正在尝试在我的应用程序中实现商业销售的 Bootstrap 模板之一，但我遇到了几个问题，如下所示。该模板在我的 Meteor 应用程序之外运行良好。所以我很困惑为什么我会看到所有这些错误？我是否必须使用 Meteor 包（例如 Meteor bootstrap、JS 包）并用 Meteor 包的模板包替换模板包？在我的应用程序中实现此模板时，这里有什么遗漏吗？谢谢

  client/views/assets/lib/bootstrap-datepicker/less/datepicker.less:13:2: Less compiler error: .border-radius is undefined
   client/views/assets/lib/bootstrap-datepicker/less/datepicker3.less:103:16: Less compiler error: variable @gray-lighter is undefined
   client/views/assets/less/bootstrap/custom.less:12:2: Less compiler error: .border-radius is undefined
   client/views/assets/less/pages/chat.less:5:9: Less compiler error: .reset_ul is undefined
   client/views/assets/less/pages/gallery.less:4:5: Less compiler error: .reset_ul is undefined
   client/views/assets/less/pages/invoices.less:6:16: Less compiler error: variable @link-color is undefined
   client/views/assets/less/pages/login.less:25:16: Less compiler error: variable @screen-sm-max is undefined
   client/views/assets/less/pages/mailbox.less:15:13: Less compiler error: .border-radius is undefined
   client/views/assets/less/pages/search.less:4:5: Less compiler error: .reset_ul is undefined
   client/views/assets/less/pages/user_list.less:4:5: Less compiler error: .reset_ul is undefined
   client/views/assets/less/pages/user_profile.less:7:5: Less compiler error: .border-radius is undefined
   client/views/assets/less/partials/breadcrumbs.less:12:3: Less compiler error: .reset_ul is undefined
   client/views/assets/less/partials/header.less:11:3: Less compiler error: .transition is undefined
   client/views/assets/less/partials/main_menu.less:10:22: Less compiler error: variable @side_menu_expanded_width is undefined
   client/views/assets/less/plugins/c3.less:29:12: Less compiler error: variable @white is undefined
   client/views/assets/less/plugins/datatables.less:134:16: Less compiler error: variable @white is undefined
   client/views/assets/less/plugins/datepicker.less:12:4: Less compiler error: .border-radius is undefined
   client/views/assets/less/plugins/daterangepicker.less:6:13: Less compiler error: .border-radius is undefined
   client/views/assets/less/plugins/easy-pie-chart.less:28:9: Less compiler error: .custom_font is undefined
   client/views/assets/less/plugins/fullcalendar.less:4:5: Less compiler error: .custom_font is undefined
   client/views/assets/less/plugins/gmaps.less:5:5: Less compiler error: .box-shadow is undefined
   client/views/assets/less/plugins/gridforms.less:10:13: Less compiler error: .custom_font is undefined
   client/views/assets/less/plugins/jvectormap.less:8:9: Less compiler error: variable @white is undefined
   client/views/assets/less/plugins/listnav.less:5:5: Less compiler error: .cf is undefined
   client/views/assets/less/plugins/notifications.less:3:5: Less compiler error: .opacity is undefined
   client/views/assets/less/plugins/parsley.less:6:23: Less compiler error: variable @brand-danger is undefined
   client/views/assets/less/plugins/plupload.less:7:17: Less compiler error: variable @theme-color is undefined
   client/views/assets/less/plugins/rangeSlider.less:5:2: Less compiler error: .border-radius is undefined
   client/views/assets/less/plugins/select2.less:9:3: Less compiler error: .box-shadow is undefined
   client/views/assets/less/plugins/switchery.less:4:20: Less compiler error: variable @white is undefined
   client/views/assets/less/plugins/wizard.less:5:3: Less compiler error: .cf is undefined
   client/views/assets/less/css_animations.less:6:40: Less compiler error: variable @easeInOutQuart is undefined
   client/views/assets/less/demo.less:6:5: Less compiler error: .custom_font is undefined
   client/views/assets/less/media_queries.less:3:8: Less compiler error: variable @screen-md-max is undefined
   client/views/assets/less/style.less:31:15: Less compiler error: variable @main-bg is undefined
   client/views/assets/less/style_switcher.less:16:27: Less compiler error: variable @easeInCubic is undefined
   client/views/assets/less/themes.less:20:21: Less compiler error: variable @theme-secondary-color is undefined
   client/views/assets/lib/parsley/src/wrap/append.js:1:17: Unexpected token )
   client/views/assets/lib/parsley/src/wrap/prepend.js:19:3: Unexpected end of input
   client/views/assets/lib/c3/src/head.js:6:3: Unexpected end of input
   client/views/assets/lib/c3/src/tail.js:11:1: Unexpected token }

【问题讨论】：

标签： twitter-bootstrap meteor less

【解决方案1】：

试试看这个：https://github.com/rune-ks/meteor-boilerplate

如自述文件中所述，我从差分中分叉并更新了它。当然，您可以删除/删除/添加任何您想要的东西，所以它适合您。我只是设置了它，所以它对我有用。

要回答 Meteor 抛出错误的原因，我很确定这是因为 Bootstrap 的 less 文件使用了很多 @import，而要使用 Meteor 来做到这一点，必须将 less 文件称为 <somefile>.import.less。否则，当它试图将所有较少的文件编译到一个 css 文件中时，它会变得很混乱。

【讨论】：

【解决方案2】：

我将首先删除引发错误的规则。我还要说不包括定义规则的文件是一个问题。例如@include 变量，或者在定义变量“link-color”的地方调用文件。例如。 $链接颜色：粉红色；它总是在流星之外工作，因为静态页面将在编译的 css 上运行。链接颜色可能未定义，但浏览器将忽略您尝试提供链接颜色的规则，并且可能默认为该元素的引导标准规则

【讨论】：