Materialize

A modern responsive front-end framework based on Material Design.
Material Disign 风格的现代响应式前端框架

为什么要写这篇文章呢？

原因很简单，我闲着没事干

Laravel

运行 composer create-project laravel/laravel materialize --prefer-dist 进行安装

Materialize

安装

使用 NPM/Yarn

$ yarn add materialize-css@next
$ npm install materialize-css@next

使用

首先；创建需要的文件

• resources
  • js
  • app.js
  • sass
  • _variables.scss
  • app.scss

然后，根据下面的文件内容自行编写
js/app.js

import './bootstrap'
import M from 'materialize-css'
import axios from 'axios'

scss/_variables.scss

// 随个人喜好更改
// 字体
$font-stack: "Lucida Grande", Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei, Verdana, Aril, sans-serif;

// 按钮
$button-large-font-size: 14px;
$button-large-icon-font-size: 1.6rem;
$button-large-height: 40px;

scss/app.scss

@import "variables";
@import "~materialize-css/sass/materialize";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

最后，进行编译

$ yarn dev
$ npm run dev

结语

恭喜，你已经可以在项目中使用 Materialize 了

参考文档

• Materialize 文档

本作品采用《CC 协议》，转载必须注明作者和本文链接