TIL 14일차_혼자해본 Scss

혼자해본 Scss

---

아. 혼자하는건 역시 쉽지않았다.

Sass설치부터 컴파일 까지

1. sass설치 (sudo로)

sudo npm install -g sass
global로 설치해서 한번만 설치하면 끝.

2. package.json 생성

npm init

3. node-sass 설치

npm install node-sass --save-dev
이렇게하면 devDependencies에 저장되고
save이후를 안적어주면 그냥 Dependencies에 저장된다.

4. 어떤 css와 어떤 scss를 링크할지 저장해준다.

script안에 다음을 적어준다.
"이름": "node-sass 작성한.scss 작성한.css -w"
-w를 붙이면 실시간으로 컴파일 해준다.

"scripts": {
    "compile:sass": "node-sass main.scss style.css -w",
    "liveServer": "live-server",
    "animal": "node-sass main.scss _animal.css -w"
  },

5. npm run all 설치/실행

npm run all을 실행하려면 이 패키지를 설치해줘야하는데
3번의 node-sass를 설치할 때, 같이해줬다.
설치는
npm install npm-run-all --save-dev

실행은 start라는 이름(임의의 이름)으로 다음과같이 작성해준뒤에 실행한다.

"scripts": {
    "compile:sass": "node-sass main.scss style.css -w",
    "liveServer": "live-server",
    "animal": "node-sass main.scss _animal.css -w",
    "start": "npm-run-all --parallel liveServer compile:sass "
  },

실행
npm run start

Today's ?!

4번단계에서 작성한.scss와 작성한.css의 파일 위치가 같아야 오류가 안뜬다.
어떻게하면 될것같은데...