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