logo标签列表

如何将UI套件（例如Get Shit Done）添加到现有的Rails项目中？

ruby-on-railstwitter-bootstrapasset-pipeline
5

我对Rails（以及Web开发）相当新，正试图将Get Shit Done UI Kit（GSD）添加到我现有的Rails-Bootstrap应用程序中（已使用bootstrap-rails gem安装了Bootstrap）。

这些是随同此特定套件提供的文件：

x_get_shit_done
--assets
---css
-----demo.css
-----get-shit-done.css
-----gsdk-base.css
-----gsdk-checkbox-radio-switch.css
-----gsdk-sliders.css
---img
---js
-----custom.js
-----get-shit-done.js
-----gsdk-bootstrapswitch.js
-----gsdk-checkbox.js
-----gsdk-radio.js
-----jquery-ui-1.10.4.custom.min.js
--bootstrap3
--index.html

以下是示例模板中样式表的调用方式：
<link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/get-shit-done.css" rel="stylesheet" />
    <link href="assets/css/demo.css" rel="stylesheet" />

但在我的Rails应用程序中，样式表和JS被称为如下所示：
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

我知道Rails提供了一些神奇的方法来添加样式表到项目中，但我不太明白这种魔法如何适用于添加新的自定义样式表。
此外，我的应用程序中所有的CSS文件（遵循教程）都是Sass（.css.scss），所有的HTML文件都是嵌入式Ruby（.html.erb），并且已经使用bootstrap-rails gem安装了Bootstrap。
我需要以某种方式将UI kit的CSS文件转换为Sass吗？由于没有GSD的gem，似乎必须手动添加所有的样式，这就是我感到困惑的原因。
感谢您对这个初学者问题的耐心解答 :)
2个回答
3
首先阅读有关Rails的资产管道，您将找到所有问题的答案。
在您的情况下，您需要将css文件放置在vendor/asssets/stylesheets中，将js文件放置在vendor/assets/javascripts中。然后使用require将它们添加到application.css和application.js中。

application.css:

*= require_directory get_shit_done # this is vendor/assets/stylesheets/get_shit_done
*= require_tree .
*= require_self

application.js:

//= require_directory get_shit_done
//= require_tree .

之后所有的 css 和 js 文件将自动加载到 <head> 中。

然后，您检查 index.html 并根据其更改您的 application.html.erb：添加 <meta>，一些基本的 div，例如 Bootstrap 中的 div.container 等。 您不需要将 css 和 js 文件添加到布局中，因为您已经使用 Asset Pipeline 完成了这项工作。

但我强烈建议您阅读有关 Asset Pipeline、.erb 格式和其他 Rails 基础知识的内容。最好从它们开始，而不是从实现 css 框架开始项目。

太棒了，谢谢Peter。我现在明白该怎么做了。我会像你建议的一样学习资产管道。 - Allen
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接