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