I have a less file that imports another less file, the latter importing some css files.
Here is my 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
*/
The simpliq/style
file looks like this:
// 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";
The problem arises with the first import, @import "import.less";
, here's that file:
@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);
The error I'm getting on the production app on Heroku is this:
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
All of these CSS files are in the same directory (assets/simpliq) as the import.less
file. And my assets are precompiled using:
config.assets.precompile += %w( theme.js simpliq/* page_specific_manifests/* page_specific_files/* libraries/* )
Any help would be much appreciated.
Thanks!
I was only able to fix this by adding .less
to each of the css files. For instance, @import "jquery-ui-1.10.3.custom.css";
became @import "jquery-ui-1.10.3.custom.css.less";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.