Question

我知道有100个资源，但我花了3个多小时，似乎无法解决这个问题。一切都在当地工作，但当我推到Heroku时，一切都会崩溃。

这是我的文件夹结构：

@import "impression/css/animate.css";
@import "impression/css/bootstrap.min.css";
@import "impression/css/main.css";
@import "impression/css/responsive.css";
@import "impression/fonts/font-awesome.min.css";
@import "impression/fonts/simple-line-icons.css";
@import "impression/css/slicknav.css";
@import "impression/css/nivo-lightbox.css";
@import "impression/css/animate.css";
@import "impression/css/owl.carousel.css";
@import "impression/css/colors/default.css";

我在我的application.scss中调用了这个

vendor
-assets
--custom
---impression
----js
-----file1.js
-----file2.js
-----file3.js

我已尝试在本地供应商的不同子目录中移动内外的每种组合，但每当我推送到生产时，它会显示文件的404。

奇怪的部分是所有js资产正在编译查找和显示。它们属于这样的文件结构

//= require impression/js/bootstrap.min.js
//= require impression/js/jquery.countdown.min.js
//= require impression/js/smooth-scroll.js
//= require impression/js/wow.js
//= require impression/js/owl.carousel.min.js
//= require impression/js/jquery.slicknav.js
//= require impression/js/nivo-lightbox.js
//= require impression/js/form-validator.min.js
//= require impression/js/contact-form-script.js
//= require impression/js/main.js

并在application.js中调用，如此

{{1}}

我尝试在heroku构建期间对其进行预编译，但它似乎可以正常工作但是它会失败，因为它正在预编译一些gem文件资产而且它们正在破坏。

Answer 1

我认为您的应用资产文件文件夹结构不正确。我修改了您的文件夹结构，您可以尝试检查。

以下是修改后的文件夹结构：

vendor
-assets
--stylesheets
---custom
----impression
-----file1.css
-----file2.css
-----file3.css

这是您的application.scss文件

@import "custom/impression/animate";
@import "custom/impression/bootstrap.min";
@import "custom/impression/main";
@import "custom/impression/responsive";
@import "custom/impression/font-awesome.min";
@import "custom/impression/simple-line-icons";
@import "custom/impression/slicknav";
@import "custom/impression/nivo-lightbox";
@import "custom/impression/animate";
@import "custom/impression/owl.carousel";
@import "custom/impression/colors/default";

这里是JS修改过的文件夹结构

vendor
-assets
--javascripts
---custom
----impression
-----file1.js
-----file2.js
-----file3.js

并在application.js中调用，如此

//= require custom/impression/bootstrap.min
//= require custom/impression/jquery.countdown.min
//= require custom/impression/smooth-scroll
//= require custom/impression/wow
//= require custom/impression/owl.carousel.min
//= require custom/impression/jquery.slicknav
//= require custom/impression/nivo-lightbox
//= require custom/impression/form-validator.min
//= require custom/impression/contact-form-script
//= require custom/impression/main

我希望它能起作用。

生产中的供应商资产管道CSS

1 个答案: