css - 为什么将 CSS 导入到 Heroku 上的 Less 文件会中断？

Question

我有一个 less 文件导入另一个 less 文件，后者导入一些 css 文件。

这是我的 application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *= require simpliq/bootstrap.min
 *= require simpliq/style
 *= require simpliq/retina.min
 *= require gritter
 *= require bootstrap-overrides
 *= require custom-styles
 *= require mobile
 */

simpliq/style 文件如下所示:

// Import External CSS Files
//===================================================================
@import "import.less";

// Import LESS Files
//===================================================================
@import "less/main.less";
@import "less/colors.less";
@import "less/mixins.less";
@import "less/header.less";
@import "less/navigation.less";
@import "less/buttons.less";
@import "less/tabs.less";
@import "less/forms.less";
@import "less/notifications_labels.less";
@import "less/modal.less";
@import "less/footer.less";

// My Custom Styles
//===================================================================
@import "less/charts.less";
@import "less/smallstats.less";
@import "less/discussions.less";
@import "less/chat.less";
@import "less/calendar.less";
@import "less/dashboard-list.less";
@import "less/tickets.less";
@import "less/todo.less";
@import "less/sliders_progress_bars.less";
@import "less/quick-buttons.less";
@import "less/circle-stats.less";
@import "less/others.less";
@import "less/switch-input.less";

// Components
//===================================================================
@import "less/datatables.less";
@import "less/justgage.less";
@import "less/nestable.less";
@import "less/wizard.less";
@import "less/datepicker.less";
@import "less/timepicker.less";
@import "less/daterangepicker.less";
@import "less/colorpicker.less";

// Example Pages
//===================================================================
@import "less/page-inbox.less";
@import "less/page-todo.less";
@import "less/page-profile.less";
@import "less/page-login.less";

// Responsive
//===================================================================
@import "less/responsive.less";

第一次导入时出现问题，@import "import.less";，这是那个文件:

@import "jquery-ui-1.10.3.custom.css";  
@import "fullcalendar.css";       
@import "chosen.css";         
@import "jquery.cleditor.css";      
@import "jquery.noty.css";        
@import "noty_theme_default.css";  
@import "uploadify.css";        
@import "jquery.gritter.css";     
@import "font-awesome.min.css";     
@import "glyphicons.css";       
@import "halflings.css";
@import "filetypes.css";
@import "social.css";
@import "xcharts.min.css";
@import "jquery.easy-pie-chart.css";
@import url(//fonts.googleapis.com/css?family=Lato:300);  
@import url(//fonts.googleapis.com/css?family=Lato:400);  
@import url(//fonts.googleapis.com/css?family=Kaushan+Script);  

我在 Heroku 上的生产应用程序上遇到的错误是这样的:

GET http://app.herokuapp.com/assets/jquery.cleditor.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/jquery-ui-1.10.3.custom.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/jquery.noty.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/noty_theme_default.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/uploadify.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/chosen.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/jquery.gritter.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/font-awesome.min.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/fullcalendar.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/filetypes.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/glyphicons.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/social.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/xcharts.min.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/jquery.easy-pie-chart.css  app.herokuapp.com/:1160
GET http://app.herokuapp.com/assets/halflings.css  

所有这些 CSS 文件都在与 import.less 文件相同的目录 (assets/simpliq) 中。我的 Assets 是使用以下方法预编译的:

config.assets.precompile += %w( theme.js simpliq/* page_specific_manifests/* page_specific_files/* libraries/* )

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

我只能通过向每个 css 文件添加 .less 来解决这个问题。例如，@import "jquery-ui-1.10.3.custom.css"; 变成了 @import "jquery-ui-1.10.3.custom.css.less";