如何使用资产管道将Bootstrap Landkit添加到Rails应用程序？ 我的JavaScript似乎无法正确链接

编程问答 2022-08-13

问题描述

早上好。 这样，对于Web应用程序项目，您就可以使用了，我和我的团队购买了Boostrap Landkit，根据该套件的网站，我们可以将其链接到Rails应用程序。

仅在这里，文件夹的体系结构与Rails应用程序的体系结构有很大不同（如果我不是说废话的话，它适用于Gulp）。为了测试主题，我试图通过复制和粘贴工具包中提供的该页面的HTML代码来相同地复制其演示页面之一。

由于每个css和javascript文件都直接在html页面中使用相对链接进行调用，因此我将这些不同的文件放置在资产管道中（“供应商/资产/ javascripts”和“供应商/资产/样式表”）。然后，我需要在清单文件中找到所有这些文件（“ app / asset / javascripts / application.js”和“ app / asset / stylesheets / application.css.scss”）。 我还将链接<% = stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload'%>和<% = javascript_include_tag 'application '%>放在我的“ application.html.erb”文件中，以最终确定连接。 CSS似乎可以正常工作，但是，某些javascript动画似乎有错误，特别是导航栏和卡片的动画。不过，我似乎已经正确地将在html页面中调用的所有js文件正确地放置在资产管道中，因此欢迎您提供一些帮助^^！

上面链接中提到的所有文件都添加在“供应商/资产/ javascript”和“供应商/资产/样式表”中。我真的不知道该怎么办。

感谢您的时间，对于冗长的解释深表歉意，但是我不知道问题出在哪里，因为运行服务器时不会出现控制台错误。

这是下载文件夹的结构：


   ├── ? dist - Generated production files 

   ├── ? node_modules - Directory where npm installs dependencies. 

   ├── ? src

              ├── ? assets

              |                     ├── ? css - Compiled CSS 
              |                     ├── ? fonts - HK Grotesk Pro font 
              |                     ├── ? img - Image assets
              |                     ├── ? js - Javascript source
              |                     ├── ? libs - Third party plugins 
              |                     |___ ? scss - SCSS source for theme 
              ├── ? docs - Documentation 
              |____ ? partials - HTML partials 
   ├── ? gulpfile.js - All the build commands  
   ├── ? package.json - List of dependencies and npm information 
   |__ ? .gitignore - Hide all unnecessary files from Git

这是我的“ application.css.scss”的内容：

 *= require feather.css
 *= require jquery.fancybox.min.css
 *= require aos.css
 *= require choices.min.css
 *= require flickity-fade.css
 *= require flickity.min.css
 *= require vs2015.css
 *= require jarallax.css
 *= require quill.core.css
 *= require bootstrap.min.css
 *= require theme.min.css
 */

这是“ application.js”的内容：

//= require rails-ujs
//= require activestorage
//= require popper
//= require tether
//= require jquery
//= require jquery_ujs
//= require jquery.min.js
//= require jquery.fancybox.min.js
//= require bootstrap.bundle.min.js
//= require aos.js
//= require navbar.js
//= require choices.min.js
//= require countUp.min.js
//= require dropzone.min.js
//= require flickity.pkgd.min.js
//= require flickity-fade.js
//= require highlight.pack.min.js
//= require imagesloaded.pkgd.min.js
//= require isotope.pkgd.min.js
//= require jarallax.min.js
//= require jarallax-video.min.js
//= require jarallax-element.min.js
//= require quill.min.js
//= require smooth-scroll.min.js
//= require typed.min.js
//= require theme.min.js
//= require bootstrap.min.js
//= require bootstrap

这是页面HTML代码中的初始链接：

    <!-- Libs CSS > 
    <link rel="stylesheet" href="./assets/fonts/Feather/feather.css">
    <link rel="stylesheet" href="./assets/libs/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
    <link rel="stylesheet" href="./assets/libs/aos/dist/aos.css">
    <link rel="stylesheet" href="./assets/libs/choices.js/public/assets/styles/choices.min.css">
    <link rel="stylesheet" href="./assets/libs/flickity-fade/flickity-fade.css">
    <link rel="stylesheet" href="./assets/libs/flickity/dist/flickity.min.css">
    <link rel="stylesheet" href="./assets/libs/highlightjs/styles/vs2015.css">
    <link rel="stylesheet" href="./assets/libs/jarallax/dist/jarallax.css">
    <link rel="stylesheet" href="./assets/libs/quill/dist/quill.core.css" />

    <!-- Theme CSS -->
    <link rel="stylesheet" href="./assets/css/theme.min.css">
    
     <!-- Libs JS -->
    <script src="./assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="./assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./assets/libs/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
    <script src="./assets/libs/aos/dist/aos.js"></script>
    <script src="./assets/libs/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="./assets/libs/countup.js/dist/countUp.min.js"></script>
    <script src="./assets/libs/dropzone/dist/min/dropzone.min.js"></script>
    <script src="./assets/libs/flickity/dist/flickity.pkgd.min.js"></script>
    <script src="./assets/libs/flickity-fade/flickity-fade.js"></script>
    <script src="./assets/libs/highlightjs/highlight.pack.min.js"></script>
    <script src="./assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="./assets/libs/isotope-layout/dist/isotope.pkgd.min.js"></script>
    <script src="./assets/libs/jarallax/dist/jarallax.min.js"></script>
    <script src="./assets/libs/jarallax/dist/jarallax-video.min.js"></script>
    <script src="./assets/libs/jarallax/dist/jarallax-element.min.js"></script>
    <script src="./assets/libs/quill/dist/quill.min.js"></script>
    <script src="./assets/libs/smooth-scroll/dist/smooth-scroll.min.js"></script>
    <script src="./assets/libs/typed.js/lib/typed.min.js"></script>

    <!-- Theme JS -->
    <script src="./assets/js/theme.min.js"></script>

这是我的“ application.html.erb”：

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>TestTheme</title>
    <%= csrf_Meta_tags %>
    <%= csp_Meta_tag %>

    <%= stylesheet_link_tag    'application','data-turbolinks-track': 'reload' %>
   

  </head>

  <body>
      <!-- Map -->
    <link href='https://api.mapBox.com/mapBox-gl-js/v0.53.0/mapBox-gl.css' rel='stylesheet' />
    <%= yield %>
     <%= javascript_include_tag 'application' %>
      
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asset-pipelinejavascriptruby-on-railstwitter-bootstrap