BigBing 技术博客

Rails5.2用Wepacker安装和使用Materialize CSS

快速应用Starter Template的效果

Materialize CSS是一个比较新的基于Google Material Design的前端框架,界面非常简洁,而且很容易使用。

其中,在最新发布的1.0版本中,去掉了对于JQuery的依赖,这是一个很大进步。因为在Rails5以后也是移除了JQuery,而且接下来在我的项目中,我会开始使用React.js作为前端的开发框架。

下面就来介绍一下通过Webpacker安装和使用Materialize的步骤:

准备工作: 在app/javascript/下面创建stylesheets目录以及application.scss文件:

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

然后我们需要import刚才创建的scss文件,让Webpacker帮我们编译scss文件

// app/javascript/packs/application.js

import '../stylesheets/application'

在页面中引入Webpacker帮我们编译的application.jsapplication.css文件

# app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

使用yarn安装materialize-css

yarn add materialize-css

我们可以在node_modules/materialize-css下面找到安装好的文件 下面我们要把materialize.js加入到application.js

// app/javascript/packs/application.js

import 'materialize-css/dist/js/materialize'

然后到application.scss中引入materialize.css

// app/javascript/stylesheets/application.scss

@import materialize-css/dist/css/materialize;

最后我们还需要在application.html.erb中加入Materialize依赖的字体和图标

// app/views/layouts/application.html.erb

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

安装配置到这里就完成了,接下来就是找一些Materialize的实例,应用到网站上吧。 更多的细节可以参考我完成的commit: Github commit