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

Question

我知道有 100 个资源，但我花了 3 个多小时，似乎无法弄清楚这一点。一切都在本地工作，但是当我推到Heroku时，所有的地狱都松动了。

这是我的文件夹结构：

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

我在我的应用程序中调用了它.scss，就像这样

@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";

我已经尝试了将内容移入和移出本地供应商的不同子目录的所有组合，但每次当我推送到生产环境时，它都会显示文件的 404。

奇怪的部分是所有js资产都在编译查找并显示。它们在文件结构中是这样的

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

并在应用程序中调用.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

我尝试让它在 heroku 上构建期间预编译资产，它似乎可以工作，但它会走得这么远并失败，因为它也在预编译一些 gem 文件资产并且它们正在损坏。

Answer 1

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

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

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

这是您的应用程序.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

并在应用程序中调用.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

我希望它应该起作用。