將Bootstrap-Material-Design的LESS版本集成到Rails項目

Question

我正在使用這個gem bootstrap-material-design ，它是https://github.com/FezVrasta/bootstrap-material-design庫的sass版本，但最近我注意到不再維護sass版本。

問題我用這種寶石所面臨的是，它不轉按鈕和閃光燈消息風格的材料。

這里建議的一種解決方案 ： https : //github.com/FezVrasta/bootstrap-material-design/issues/535使用LESS版本，但是我不知道如何集成該庫的LESS版本。 有人已經這樣做了嗎？

更新：

如果有人希望將Bootstrap-Material-Design添加到他們的站點，而無需使用任何框架或服務器端語言（如Ruby，PHP等），僅使用HTML5，CSS3和JS。 他們可以按照以下說明進行操作：

安裝和下載引導材料文件夾

bower install bootstrap-material-design

在head標簽下鏈接引導CSS和材質CSS縮小文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-material-design/dist/css/material-fullpalette.min.css">

鏈接Javascript文件

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>

最后，您必須使用此腳本在身體底部初始化一些材料組件

<script>
$(document).ready(function() {
  $.material.init();
});
</script>

Answer 1

首先安裝Rails，請參閱： http : //guides.rubyonrails.org/getting_started.html 。 然后，您可以通過在控制台中運行以下命令來創建新的Rails應用程序：

>> rails new material

上面的命令將創建一個新的material目錄，導航到該目錄（ >> cd material ）。 現在打開Gemfile並刪除Sass捆綁包和Less捆綁包：

#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby

然后再次運行bundle install 。 現在，導航到您的public目錄（ >> cd public ）並運行以下命令：

>> bower install bootstrap-material-design

現在，您可以通過運行以下命令來創建一個名為“ welcome”的控制器以及一個名為“ index”的操作：

>> bin/rails generate controller welcome index

除其他外，上述命令創建app/views/welcome/index.html.erb文件。 打開app/views/welcome/index.html.erb文件並寫出下面顯示的內容（根據https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test .html ）：

<!-- Your site -->
<h1>You can add your site here.</h1>
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
</p>
<!-- Your site ends -->

然后，確保./app/views/layouts/application.html.erb文件的內容如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Material</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>


<!-- Your site ends -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>


</body>
</html>

最后，將app/assets/stylesheets/application.css重命名為app/assets/stylesheets/application.css.less並將以下內容寫下來：

@import "../../../public/bower_components/bootstrap-material-design/less/material-fullpalette.less";
@color: red;
h1 {
color: @color;
}

現在，您可以運行>> bin/rails server並在瀏覽器中打開http://localhost:3000/welcome/index 。 現在，結果應如下圖所示：

在此處輸入圖片說明

Answer 2

如果您打算使用Aufree的這款gem ，那么按照文檔進行操作實際上非常簡單。

將寶石添加到您的寶石文件中，並添加更少的軌道

gem 'less-rails' 

gem 'bootstrap-material-design'

然后捆綁。

現在，轉到您的application.js文件並添加

//= require bootstrap-material-design

然后進入application.css文件並添加

*= require bootstrap-material-design

之后，重新啟動服務器。 應該很好走

將Bootstrap-Material-Design的LESS版本集成到Rails項目

問題描述

2 個解決方案

解決方案1
4 已采納 2015-03-30 11:35:46

解決方案2
0 2016-04-18 18:22:07

將Bootstrap-Material-Design的LESS版本集成到Rails項目

問題描述

2 個解決方案

解決方案1 4 已采納 2015-03-30 11:35:46

解決方案2 0 2016-04-18 18:22:07

解決方案1
4 已采納 2015-03-30 11:35:46

解決方案2
0 2016-04-18 18:22:07