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

Question

我对 Rails（以及一般的 Web 开发）相当陌生，我正在尝试将 Get Shit Done UI Kit (GSD) 添加到我现有的 Rails-Bootstrap 应用程序（Bootstrap 已使用 bootstrap-rails gem 安装）。

这些是这个特定工具包附带的文件：

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 应用程序中，stylesheets/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 已经使用 bootstrap-rails gem 安装。

我是否需要以某种方式将带有 UI 工具包的 CSS 文件转换为 Sass？ GSD 没有 gem，因此似乎有必要手动添加所有样式，我认为这是让我失望的地方。

感谢您耐心解答这个菜鸟的问题:)

Answer 1

首先阅读 Rails' Asset Pipeline，您会找到所有问题的答案。

在您的情况下，您需要将 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，例如 div.container 在 Bootstrap 等等。您不需要将 css 和 js 文件添加到布局，因为您已经使用 Asset Pipeline 完成了它。

但我强烈建议您阅读资产管道、.erb 格式和其他一些 rails 基础知识。最好从他们开始，而不是从实施 css 框架到项目。

Answer 2

@Allen 我是 Creative Tim 的一员，我们制作了 Get Shit Done UI Kit and I would like to tell you that we've got a collaboration with a Ruby on Rails professional and we created a Get Shit Done UI Kit Rails Gem

请检查它，它托管在官方 rubygems.org 上，如果一切正常，请告诉我们。

最好的，亚历克斯

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

How to add a UI kit (such as Get Shit Done) to an existing Rails project?

ruby-on-rails

asset-pipeline

twitter-bootstrap