为什么在Heroku上将CSS导入到一个更少的文件中?
我有一个较少的文件,导入另一个较少的文件,后者导入一些css文件 这是我的application.css:为什么在Heroku上将CSS导入到一个更少的文件中?,css,ruby-on-rails,less,asset-pipeline,Css,Ruby On Rails,Less,Asset Pipeline,我有一个较少的文件,导入另一个较少的文件,后者导入一些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 si
/*
* 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)中。并且我的资产是通过以下方式预编译的:
config.assets.precompile+=%w(theme.js simpliq/*特定于页面的\u清单/*特定于页面的\u文件/*库/*)
任何帮助都将不胜感激
谢谢 我只能通过向每个css文件添加.less
来解决这个问题。例如,@import“jquery-ui-1.10.3.custom.css”
变成了@import“jquery-ui-1.10.3.custom.css.less”
导入css时,请尝试css
或inline
选项,另请参见:。请注意,我看不出您遇到了什么类型的错误?如果我读得正确,请首先包括bootstrap.min文件,然后是“自定义”样式。。如果已处理引导文件(而不是@import'simpliq/bootstrap.min.css'
),则在导入css文件时应使用less
选项。您不应该在css@import
s之前放置任何内容(注释除外)。@BassJobsen和我尝试过,它不会预编译:/我得到的错误是您上面看到的所有“GET”。@madcorp我尝试过指令,它们不会precompile@trevorhinesley你能从浏览器打开这些文件吗?或者您检查了权限了吗?正如我前面提到的,要使用less
选项,@import“any_file.css.less”
与@import(less)“any_file.css”
相同(或任何其他文件,扩展名无关紧要)。作为参考-@madcorp,正如我之前提到的,这不起作用。我试过了,但它不会预编译。