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.js和application.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