CSS - Parcel

Parcel

 

Install Parcel

advanced 한 CSS 코드들을 old CSS 로 complie하기 위한 module

 

Ctrl+` 단축키를 이용하여 console 창을 띄운 후에

 

npm init -y

 

명령어를 입력하면 package.json 파일이 생성된다. 그럼 다시 console 창에 

 

clear 

 

명령어를 입력한다.

 

package.json 파일의 scripts 코드를 지우고 parcel를 설치하기 위해

 

npm install -g parcel -bundler

 

명령어를 입력한다.

 

parcel 설치가 완료되면 html 파일을 생성하고, 해당 html 파일에 css 파일을 연결시킨 후에,

package.json 파일에서 "main" ~    코드부분을 제거하고, 아래 빨간 박스 내부의 코드를 입력한다.

 

 

그리고 npm run start 명령어를 입력한다. ( npm run + scripts 코드 내부의 주황색글씨 )

 

 

명령어가 실행되고 나면 

Server running at http://localhost:1234

위와 같은 결과를 확인 할 수 있는데 이 주소로 들어가면 정상 작동하는 것을 확인할 수 있다. 

 

그리고 추가적으로 파란색 박스의 폴더에 있는 불필요한 코드들의 실행을 막기 위해

.gitignore 파일에 아래와 같이 .cache 와 dist를 추가해주면 된다. 

 

 

 

 

PostCSS

PostCSS는 다양한 플러그인을 제공해주어 우리의 CSS를 더 modern하게 만들어준다.

 

 

postcss-preset-env 플러그인을 사용하기 위해 빨간색 박스로 표시된 부분을 복사한 뒤, 새로운 terminal에서 console 창을 열고 해당 명령어를 입력한다.

명령어가 제대로 동작하고 나면 package-lock.json 파일이 생성되고 package.json 파일에 dependencies 가 추가되었음을 확인할 수 있다. 

 

dependencies 아래에 postcss 라는 item을 추가하고 plugins 라는 property 에 원하는 플러그인들을 입력하면 된다. (여기서는 postcss-preset-env) 

그리고 property가 지원할 stage를 설정해야한다. (stage는 3부터 0까지 있는데, 이 중 어떤 stage를 사용할지, 3는 이미 지원되고 0은 아직 support 되지 않기 때문에 아마 2나 1을 입력할 것이다. )

 

 

 

Stage 확인

 

제대로 적용되었는지 확인하기 위해서는

https://preset-env.cssdb.org/

에서 try it now 항목으로 접속한 후, 해당 stage의 css파일을 복사해서 우리의 css 파일에 붙여넣고 localhost로 html 파일에 접속한 다음 개발자모드를 들어간 후에 아래 open in web 을 클릭하면 css 파일을 적용되었는지 확인할 수 있다.