본문 바로가기

Blazor

[Blazor] Blazor WebAssembly + Webpack + TypeScript + Sass 개발 환경 구축 Blazor WebAssembly + Webpack + TypeScript + Sass 개발 환경 구축 Blazor 를 다른 환경과 통합하여 사용하는 예제를 찾을 수 없어, 직접 연구하여 공유합니다. Blazor 와 관련된 자료는 공식 문서 외에 Awesome Blazor 에서 다양하게 찾을 수 있습니다. 1. 프로젝트 생성 위 그림과 같이 Blazor WebAssembly App 프로젝트를 생성합니다. 생성하면 위 그림과 같은 결과를 얻을 수 있습니다. 현재 상태로 빌드해서 실행하면 위 그림과 같은 결과를 얻게 됩니다. 이제 여기서부터 하나하나 환경을 세팅해보도록 합시다. 2. Webpack 추가 node -v npm -v 현재 프로젝트에 Webpack 을 추가하려면 Node.js 를 설치해야 합니다...
[Blazor] Sass 를 적용하는 방법 Sass 를 적용하는 방법 일단 Sass(Syntactically Awesome Style Sheets) 를 한 문장으로 설명하자면, 스타일을 표현하는 CSS 파일을 프로그래밍 언어처럼 만들 수 있도록 하는 확장 언어입니다. 따라서 Sass 파일을 컴파일하면 결과로 CSS 파일을 얻을 수 있습니다. Sass 는 Node.js 를 바탕으로 npm 으로 패키지를 관리하며 React 로 컴포넌트를 만들고 Webpack 으로 번들링하는 FrontEnd 프로젝트에 빈번하게 사용되며, 번들링할 때 Sass 를 컴파일하여 Css 파일로 만든 뒤 최종 번들에 추가하여 사용합니다. Blazor 에서도 마찬가지로 Sass 를 사용하려면, Sass 를 컴파일하고 최종 결과에 추가하는 과정이 필요합니다. 제일 심플한 방법은 ..

티스토리툴바