Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 자바 자동캐스팅
- react ag grid
- 자바 반복문
- 자바 강제 캐스팅
- 자바 for문
- 항해99
- Til
- 자바 switch문
- 자바 while문
- TypeScript
- java
- 타입스크립트
- MySQL
- 항해99 2기
- 정보처리기사실기
- 조코딩
- 자바 향상된 for문
- 자바 조건문
- 변수
- 자바
- 자바 public
- 자바 구구단 출력
- 자바 if문
- 자바 공배수
- Vue3
- react with typescript
- 자바 스캐너
- 프로그래머스
- 이클립스 DB연동
- 자바 삼항연산자
Archives
- Today
- Total
뇌 채우기 공간
[SASS/SCSS] visual studio code에서 scss파일 사용하기/ parcel bundler설치 본문
WEB/SASS,SCSS
[SASS/SCSS] visual studio code에서 scss파일 사용하기/ parcel bundler설치
자바칩 프라푸치노 2021. 4. 19. 21:26
폴더에 이 파일들을 만든다.
scss는 브라우저에서 바로 실행이 안된다.
그래서 parcel로 컴파일을 해주어야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.scss">
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
.container{
$size: 100px;
.item{
width: $size;
height: $size;
background: tomato;
}
}
terminal에서

npm init -y라고 친다

이렇게 하면서 설치가 된다.
npm install --save-dev parcel-bundler
그리고 이렇게 치면 parcel 이 설치가 된다.

그리고 npx parcel index.html을 입력하면
로컬호스트 주소가 나타난다.
http://localhost:1234로 나타났다.


이렇게 설치가 된다.

여기로 접근하니 적용했던 scss가 나타났다.
728x90
'WEB > SASS,SCSS' 카테고리의 다른 글
[SCSS] 중첩된 속성 (0) | 2021.04.19 |
---|---|
[SCSS] @at-root 중첩 벗어나기 (0) | 2021.04.19 |
[SCSS]Ampersand &(상위 선택자 참조) (0) | 2021.04.19 |
[SCSS] 중첩 (0) | 2021.04.19 |
[SASS] 데이터 종류 (0) | 2021.04.19 |