ASP.Net Core 3.0 MVC 프로젝트에서 Material Design 사용하기

ASP.Net Core 3.0 MVC 프로젝트에서 Material Design Compoent를 사용하는 방법에 대해 알아봅니다.

기본적인 솔루션 및 패키지 구성은 이 글을 참고해 주세요.

1. package.json 수정

Material degisn을 사용하기 위해 NPM에서 "material-components-web"을 설치해야 합니다.

pakckage.json의 내용을 다음과 같이 변경합니다.

{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "gulp": "4.0.2", "del": "5.1.0", "material-components-web": "4.0.0" } }

이후 package.json 파일을 우클릭 후 패키지 복원을 클릭해 주세요.

2. css 생성

MDC을 사용할 CSS파일을 만듭니다.

"Styles"폴더를 생성하고 그 안에 "Home.css"파일을 생성한 후 다음과 같이 코딩합니다.

@import "../node_modules/material-components-web/dist/material-components-web.css"; body { margin: 0px; }

3. gulpfile.js 수정

설치한 MDCWeb 패키지와 생성한 CSS파일을 빌드시 wwwroot 폴더로 복사해주는 코드를 작성합니다.

gulp.file.js를 다음과 같이 수정합니다.

/// var gulp = require('gulp'); var del = require('del'); var paths = { scripts: ['scripts/**/*.js'], styles: ['styles/**/*'], MDCWeb: ['./node_modules/material-components-web/**/*'], }; gulp.task('clean', function () { return del(['wwwroot/scripts/**/*', 'wwwroot/node_modules/**/*']); }); gulp.task('default', function () { gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts')); gulp.src(paths.styles).pipe(gulp.dest('wwwroot/styles')); gulp.src(paths.MDCWeb).pipe(gulp.dest('wwwroot/node_modules/material-components-web')); });

4. 페이지 수정.

예시에서는 기본 페이지를 사용합니다.

index.cshtml을 다음과 같이 수정합니다.

@{ Layout = null; } Index menuSan Francisco, CA file_download print bookmark

5. 빌드

이제 빌드 후 실행해봅시다.

다음과 같은 화면을 확인할 수 있습니다.

from http://www.smoh.kr/272 by ccl(A) rewrite - 2020-03-06 19:21:39