1. node-sass 설치하기
참고로 node.js가 설치가 되어 있어야 합니다.
https://nodejs.org/en/download
터미널에서 node -v로 node의 버전을 확인할 수 있으며, node를 설치하면 npm도 자동적으로 설치됩니다. npm은 npm -v 명령어로 버전을 확인할 수 있습니다.
설치가 모두 완료되었다면 터미널에 npm init -y 명령어 입력합니다.
이 명령어를 입력하면 해당 프로젝트 폴더에 package.json 폴더가 생성된 것을 볼 수 있습니다. package.json 파일이 존재해야지만 필요한 노드 모듈들을 다운받아 사용할 수 있습니다.
Sass를 사용하기 위해 설치를 해야합니다. Sass를 설치하기 위해서 터미널에 npm i node-sass 명령어를 입력합니다. 그러면 해당 프로젝트 node-sass가 설치가되면서 node_module이라는 폴더가 생성되고, package.json 파일을 보면
"dependencies": {
"node-sass": "^1.13.1"
}json 객체에 이러한 키와 값을 볼 수 있습니다. 이는 해당 프로젝트가 node-sass에 의존하고 있다는 기록을 갖고 있습니다.
node_module 폴더에는 우리가 설치한 모듈이 실제로 위치하고있는 폴더입니다.
2. node-sass 사용하기
설치한 node-sass를 사용하기 위해서는 package.json 파일에서 다음과 같은 내용을 추가해줍니다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass",
"sass": "node-sass styles/main.scss style.css"
}scripts의 항목을 실행하기 위해서는 터미널에 다음과 같은 명령어를 입력하여 실행할 수 있습니다.
npm run <scripts 항목의 키>을 터미널에 입력하면 package.json 파일의 scripts 항목의 키에 해당하는 값을 실행합니다.
터미널에서 npm run sass 명령어를 입력하면 node-sass styles/main.scss style.css가 실행됩니다.
node-sass [options] <input> [output] Or: cat <input> | node-sass > output
이는 input에 작성된 scss 파일을 output으로 변환해줍니다. 즉, 예제 코드는 styles 폴더에 있는 main.scss 파일을 style.css 파일로 컴파일시켜 줍니다.
이때 변환은 스크립트 명령어가 실행될 때 컴파일이 됩니다. 이는 매번 스크립트 명령어를 실행해야하므로 번거로우므로 우리는 scss파일을 수정하여 저장하면 자동으로 컴파일이 되도록 설정할 수도 있습니다. 스크립트 명령어에 옵션을 추가적으로 작성하여 설정할 수 있습니다..
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass",
"sass": "node-sass -wr styles/style.scss style.css"
}-w, --watch 옵션은 관련된 디렉토리나 파일을 지속적으로 감시합니다. 변경 수정이 일어난 경우 자동적으로 감지합니다. 즉, main.scss 파일을 수정하고 저장할 때마다 스크립트가 실행됩니다.
-r, --recursive 옵션은 main뿐만 아니라 관련된 모든 파일들이 수정되어 저장된다면 이를 인지하도록 해주는 옵션입니다.
sass-lint
lint를 사용하게되면 문법적인 실수, 설정한 규칙에 어긋난다면 자동적으로 감지하여 우리에게 알려줍니다.
먼저 Sass Lint Extension을 설치해줍니다. 새로운 Extension을 설치했다면 VScode 전체를 리로드 해주어야 합니다.
이후 터미널에 npm i -D sass-lint를 입력하여 실행합니다. 그러면 package.json 파일에 다음과 같은 항목이 추가된 것을 확인할 수 있습니다.
"dependencies": {
"node-sass": "^1.13.1"
},
"devDependencies": {
"sass-lint": "^1.13.1"
}프로젝트 루트에 .sass-lint.yml 파일을 생성한 뒤 다음과 같은 내용을 추가해줍니다.
https://gist.github.com/8dong/7f5a29f22035e59abb54088df9af7a4b
.sass-lint.yml 파일로 설치한 sass-lint의 규칙을 설정합니다.
prettier
prettier을 사용하기 위해서 .prettierrc라는 파일을 프로젝트 루트에 생성합니다. 이 파일은 prettier을 사용하기 위한 설정 파일입니다.
prettier을 사용하기 전에 몇 가지 확인해야할 사항이 있습니다.
1.VScode에서 cmd + ,을 눌러 설정에 들어간 다음, format on save가 체크되어 있는지 확인합니다.
- 설정에서 prettier config를 검색하면 Requier Config라는 항목도 체크가 되어있는지 확인합니다.
체크할 항목을 체크한 뒤에 .prettierrc 파일에 다음과 같은 내용을 추가합니다.
{
"semi": false,
"singleQuote": false,
"endOfLine": "lf",
"tabWidth": 2,
"useTabs": false
}