【Svelte】Svelte에서 Material UI를 사용해 보았다 【Material UI】
개요
Svelte에는 React 등과 마찬가지로 MaterialUI가 준비되어 있으므로 도입 절차를 작성합니다.
hperrin/svelte-material-ui
절차
MaterialUI 설치
전체 패키지 설치
콘솔
yarn add -D svelte-material-ui
이번에는 무엇을 사용할지 미정이므로 일단 전체 설치합니다.
보충: component 단위 설치
콘솔
yarn add -D @smui/button
yarn add -D @smui/card
일단 이렇게 component 단위로도 설치할 수 있으므로, 실제로 사용하는 것이 정해지면 이쪽이 좋을지도입니다.
theme 디렉토리 추가
프로젝트 루트에
theme 디렉토리를 만듭니다.콘솔
mkdir theme
바로 아래에
_smui-theme.scss라는 파일을 만듭니다.콘솔
touch theme/_smui-theme.scss
index.html 추가
index.html에
https://fonts.googleapis.com/에서 세 개의 stylesheet을 가져옵니다.index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<!-- 追加-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<!-- -->
<link rel='stylesheet' href='/global.css'>
</head>
<body/>
</html>
rollup.config.js 수정
postcss 에 use 항목을 추가하여 ./theme 를 로드하도록 합니다.rollup.config.js
postcss({
extract: './dist/css/bundle.css',
sourceMap: true,
use: [
['sass', {
includePaths: [
'./theme',
'./node_modules'
]
}]
],
plugins: [
autoprefixer()
]
}),
MaterialUI 적용
샘플 모음 여기
그것의 견본의
*.svelte 의 부호는 여기 의 Github에 있습니다지금은 아무래도 설정하는 attribute의 Documents가 없어서, 적용하고 싶은 UI를 Github의 페이지로부터 찾아 동일한 설정을 할 수 밖에 없을 것 같아・・・
요약
지금은 영어 Documents조차 남지 않는 상태이므로 앞으로 기대합니다.
실제로 사용한 component의 정리등도 만들 수 있으면 좋겠다고 생각하고 있습니다, 치트 시트적인.
힘들지만, 조사하면서 하면 깨끗한 MUI가 되므로 꼭 이용을!
Reference
이 문제에 관하여(【Svelte】Svelte에서 Material UI를 사용해 보았다 【Material UI】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hisayuki/items/11e625c647cc421cbe86텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
