淺談在 Laravel 中使用 Materialize

sunxyw發表於2018-11-21
Laravel

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 了

參考文件

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章