Question

我已下载AdminLTE Bootstrap theme并根据我的需要对其进行了修改。作为分隔页面，它们运作良好。以下是工作样本的结构：

├───homepage.html
├───dashboard.html
├───(... other html pages)
├───bower_components                                 
│   ├───bootstrap                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
│   │   │   ├───fonts                                
│   │   │   └───js                                   
│   │   ├───fonts                                    
│   │   ├───grunt                                    
│   │   ├───js                                       
│   │   ├───less                                     
│   │   │   └───mixins                               
│   │   └───nuget                                    
│   ├───bootstrap-datepicker                         
│   │   ├───.github                                  
│   │   ├───build                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
... other bootstrap components, which I will use. 
│   ├───Ionicons                                     
│   │   ├───css                                      
│   │   ├───fonts                                    
│   │   ├───less                                     
│   │   ├───png                                      
│   │   │   └───512                                  
│   │   ├───scss                                     
│   │   └───src                                      
│   ├───jquery                                       
│   │   ├───dist                                     
│   │   ├───external                                 
│   │   │   └───sizzle                               
│   │   │       └───dist                             
│   │   └───src                                      
│   │       ├───ajax                                 
│   │       │   └───var                              
...
│   └───select2                                      
│       ├───.github                                  
│       ├───dist                                     
│       │   ├───css                                  
│       │   └───js                                   
│       │       └───i18n                             
│       ├───docs                                     
│       ├───src                                      
├───dist                   # AdminLTE native css, img and js                          
│   ├───css                                          
│   │   ├───alt                                      
│   │   └───skins                                    
│   ├───img                                          
│   │   └───credit                                   
│   └───js                                           
│       └───pages                                    
└───plugins                  # other plugins I may use                        
    ├───bootstrap-slider                             
    ├───bootstrap-wysihtml5                                                        
    ├───input-mask                                   
    │   └───phone-codes                              
    ├───jQueryUI                                     
    ├───jvectormap                                   
    ├───pace                                         
    └───timepicker

粗略地说，我有bower_componets，dist和plugins，其中AdminLTE将css / js文件和我修改过的html页面放在dir根目录中。我已经将image / css / js路径更改为相对路径，并且它正在工作。

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

但是，在Ruby on Rails中，我被告知将所有css文件放入app/assets/stylesheets/并将所有js文件放入app/assets/javascripts/，以编译要使用的整个文件。我将所有页面放在public/static_pages中，当我运行服务器时，页面呈现，但没有找到css，因为html中的相对路径是硬编码的。

我的问题：

是否有更简单的方法以Rails方式集成我的项目，以便不更改此dir结构？重新组织所有这些是一项耗时的任务，我想要的是一个简单的演示，静态类型。我仍在学习并想知道我是否可以在以静态方式组织资源时以铁路方式绑定数据。

我正在使用Rails 5.1。

PS：

是否应将css / js文件放入vendor？

Answer 1

我解决了这个问题：

将所有必要的js / css放入app/assets
通过将每一个添加到预编译数组（config/initializers/assets.rb）中来预编译它们。

等于：

Rails.application.config.assets.precompile += %w( _all-skins.css AdminLTE.css bootstrap.css font-awesome.css ionicons.css)
Rails.application.config.assets.precompile += %w( adminlte.js bootstrap.js demo.js home_js.js)

无需触及application.js，application.css。 //require_tree .完成了所有工作。
注释掉页面中使用这些文件的所有<stylesheet>和<script>行。它们已经过时了。
在app/views/layouts/application.html.rb：

也就是说：

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific css -->
<%= stylesheet_link_tag 'AdminLTE', 'bootstrap', '_all-skins', 'font-awesome', 'ionicons' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific js -->
<%= javascript_include_tag 'adminlte', 'bootstrap', 'demo' %>
<!-- real external js -->
<%= stylesheet_link_tag :application, "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" %>

特定于网页的脚本应包含在单独的文件中，例如我的homepage包含home_js.js;创建另一个文件，将其放入app/assets/javascripts，将其包含在预编译数组中，但在application.html.erb中使用 not ，但在真实内容页pages/homepage.html.erb中使用它： <%= javascript_include_tag "home_js" %>。通过这种方式，您无法阻止额外的预编译工作，但您只需在一个页面中使用它们，而不是在所有页面中使用它们。

我知道有更好的解决方案，因为这意味着我必须非常明确地确定哪个页面使用哪个脚本/ css，并且只将所有页面使用的页面添加到application.html.rb以防止加载不必要的资源，但至少它正在运行。欢迎任何改进。

Ruby on Rails - 整合现有项目 - 在哪里放置css / js文件并调用它们？

1 个答案: