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

Question

我知道这方面有 100 多个资源，但我已经花费了 3 多个小时，但似乎无法弄清楚这一点。一切都在本地工作，但是当我推到 Heroku 时，一切都崩溃了。

这是我的文件夹结构：

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

我在 application.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

并且像这样在 application.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

这是你的 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

我希望它应该工作。