오픈소스 기반 디자인 개발 시스템으로 아름다운 제품을 손쉽게 만들 수 있습니다.
아래 출처 사이트 가면 정말 자세하게 하나하나 설명해주면서 따라 하실 수 있습니다. (단, 영문)
원문출처 : https://material.io/develop/web/docs/getting-started/
1. 초특급 요약
1.1 nodejs 설치
https://nodejs.org
1.2 의존성 설치
npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
npm install --save-dev @material/button
npm install --save-dev autoprefixer postcss-loader
npm install --save-dev babel-core@6 babel-loader@7 babel-preset-es2015 babel-plugin-transform-object-assign
npm install --save-dev @material/ripple
1.3 소스 복붙
- index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bundle.css">
</head>
<body>
<button class="foo-button mdc-button">
Button
</button>
<script src="bundle.js" async></script>
</body>
</html>
- app.js
import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-button'));
- app.scss
@import "@material/button/mdc-button";
.foo-button {
@include mdc-button-ink-color(teal);
@include mdc-states(teal);
}
- webpack.config.js
const autoprefixer = require('autoprefixer');
module.exports = [{
entry: ['./app.scss', './app.js'],
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
{ loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
}
},
]
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-object-assign']
},
},
]
},
}];
- package.json
{
"name": "mdesign",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"css-loader": "^1.0.1",
"extract-loader": "^3.0.0",
"file-loader": "^2.0.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"
},
"devDependencies": {
"@material/button": "^0.41.0",
"@material/ripple": "^0.41.0",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"postcss-loader": "^3.0.0"
},
"scripts": {
"build": "webpack -p",
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3. 실행
npm start
4. 빌드
npm run build
- 결과물로 bundle.js, bundle.css 파일이 최종적으로 생성됨
- 운영환경(production)에서는 index.html, bundle.js, bundle.css 위 3개 파일만 있음 땡 !!!
맺음말
- 서론본론 없이 결과물만 남기네요 ... 설명이 더 힘들거 같아서 그냥 기록용
- webpack 왜 좋은가 ? 개발 분량이 확 줄고 모듈단위 개발이 가능해 지며 또한 bundle로 묶어줘서 추후 배포에도 용이 합니다.
- 시리즈물로 만들고 있는 스몬 개발에서 디자인이 구려서 웹팩이랑 머트리얼 디자인 넣어 개발해 보려 하네요
- 뭔가를 배우면 또 뭔가를 배워야 되는 첩첩 산중의 길 쉽게 가고 싶네요 ㅎㅎ
스몬 개발 시리즈물
- v0.04 : 기본 색상을 gray 로 캐릭터 클릭하면 색상 활성화 및 상단에 선택한 캐릭터 명 및 마나 합계 표시
- v0.03 : 카드 기준 배경색 추가 + 이름표시 + 능력치 표시
- v0.02 : 색상 + 버전 기준 교차 필터링 추가
- v0.01 : 최초작성
Sponsored ( Powered by dclick )
Guess the Color Game - Day 133 | Mermaidvampire's DAILY Splitter Contest
Hello, awesome Steemheads! About GUESS THE COLOR GAM...