07. scss 연동하기

   07. scss 연동하기

- PostCSS 설치한다

  : plugin 사용하여 css 변환 도구, autoprefixer, cssnext, CSS Modules 와 비슷

- SCSS 설치한다

  : preprocessor 로 LESS, SASS, Stylus 와 같은 컴파일 to CSS 중 SCSS 사용.

01. postcss, scss 설치

npm install postcss-modules --save-dev

npm install -g node-sass

02. .postcssrc 파일 셋팅

- .postcssrc 파일 만들고 아래와 같이 입력

{
  "modules": true,
}

03. styles.scss 파일 만들고 내용작성

- styles.scss 

- App.vue

04. 실행

05. 만약 vuejs 가 아닌 scss를 독립적으로 쓰려면

Parcel

웹 애플리케이션 번들러 Parcel은 굉장히 단순하게 컴파일할 수 있습니다.
좀 더 자세한 내용은 Parcel - 시작하기 / SASS / PostCSS / Babel / Production을 참고하세요.

우선 Parcel를 전역으로 설치합니다.

$ npm install -g parcel-bundler

프로젝트에 Sass 컴파일러(node-sass)를 설치합니다.

$ npm install --save-dev node-sass

이제 HTML에 <link>로 Sass 파일만 연결하면 됩니다.
다른 설정은 필요하지 않습니다.

<link rel="stylesheet" href="scss/main.scss">

$ parcel index.html
# 혹은
$ parcel build index.html

dist/에서 컴파일된 Sass 파일을 볼 수 있고,
별도의 포트 번호를 설정하지 않았다면 http://localhost:1234에 접속하여 적용 상태를 확인할 수 있습니다.

참고 URL : https://heropy.blog/2018/01/31/sass/

[ 참고 링크 ]

- parcel 설치~ React 연동하고 Typescript 강좌 

  : 작성 내용의 상당부분 이 강좌에서 도움받았다 

    강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐

https://academy.nomadcoders.co/p/learn-parcel

- parcel 공식홈 

  : 시작하기의 내용에서 CLI들이 도움되었다

https://parceljs.org/

- vuejs 예제코드 참고

https://alligator.io/vuejs/vue-parceljs/