简体   繁体   English

将twitter bootstrap主题安装到Rails 4应用中-找不到供应商/资产目录?

[英]Install twitter bootstrap theme into rails 4 app - Vendor/assets directory not found?

I am attempting to install a theme from wrapbootstrap.com into my rails 4.1 application. 我正在尝试从wrapbootstrap.com将主题安装到我的Rails 4.1应用程序中。

I created a new app with rails 4 scaffolding. 我用rails 4脚手架创建了一个新应用。 I then took the downloaded zip directory which includes 4 directories and an index.html file and placed them where I thought they should go: 然后,我下载了包含4个目录和一个index.html文件的zip目录,并将它们放在我认为应该去的地方:

css moved to vendor/assets/stylesheets , js moved to vendor/assets/javascripts , font moved to vendor/assets/fonts , and img moved to vendor/assets/images . css移至vendor/assets/stylesheetsjs移至vendor/assets/javascriptsfont移至vendor/assets/fontsimg移至vendor/assets/images

I then added this code to me app/assets/stylesheets file: 然后,我将此代码添加到我的app/assets/stylesheets文件中:

*= require_tree ../../../vendor/assets/stylesheets/.

and this code to my app/assets/javascripts file: 并将此代码添加到我的app/assets/javascripts文件中:

//= require_tree ../../../vendor/assets/javascripts/.

At this point, I assumed I had all the files I needed in place, so I copied index.html over into my app and pointed my browser to the appropriate view. 在这一点上,我假设我已经准备好了所有需要的文件,因此我将index.html复制到了我的应用程序中,并将浏览器指向适当的视图。 Basically all I see is plain text - The css/javascript/image files are not working as intended. 基本上,我所看到的只是纯文本-css / javascript / image文件无法正常工作。

When looking at my google Chrome developer tools, I see a bunch of errors similar to this one: 在查看我的Google Chrome开发人员工具时,我看到了很多与此类似的错误:

GET http://localhost:3000/vendor/assets/stylesheets/bootstrap.min.css 404 (Not Found)

What am I missing here to get this theme to work? 我想让这个主题发挥作用的地方是什么?

EDIT: 编辑:

my html file looks like this where I am requiring the files: 我的html文件如下所示:

<!-- Styles -->
        <!-- Bootstrap CSS -->
        <link href="../../../vendor/assets/stylesheets/bootstrap.min.css" rel="stylesheet">
        <!-- Font awesome CSS -->
        <link href="../../../vendor/assets/stylesheets/font-awesome.min.css" rel="stylesheet">
        <!-- Pretty Photo -->
        <link href="../../../vendor/assets/stylesheets/prettyPhoto.css" rel="stylesheet">
        <!-- Animate -->
        <link href="../../../vendor/assets/stylesheets/animate.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="../../../vendor/assets/stylesheets/style.css" rel="stylesheet">

不要将供应商路径放在href中,只需添加常规<%= stylesheet_link_tag 'application', media: 'all' %>并在application.css文件中包括其他CSS。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM