노드를 사용하여 SCSS를 CSS로 변환하는 5가지 빠른 단계(감시 및 축소 모드 포함)

Windows10에서 vscode 편집기를 사용합니다.

1. Node.js 설치

먼저 공식 웹 사이트nodejs.org에서 노드를 다운로드하여 설치합니다.

2. NPM 초기화

vscode 터미널을 엽니다. 명령 실행npm init
모든 옵션(설명, 작성자, 키워드 등)에 하나씩 Enter 키를 누르거나 모든 옵션에 정보를 입력합니다(원하는 경우, 필수는 아님). 그 후 package.json 파일이 파일 구조에 생성됩니다.

3. Sass 설치

sass 패키지를 찾으려면 npm website으로 이동하십시오.



터미널에서 명령 실행npm install sass
그 후 node_modules 폴더와 package-lock.json 파일이 파일 구조에 추가됩니다.

4. sass 명령 작성

package.json 파일로 이동합니다. 스크립트 섹션에서 "test": "echo \"Error: no test specified\" && exit 1"를 제거하고 작은 스크립트를 추가합니다.

"scripts": {
    "scss": "sass --watch sass/style.scss css/style.css"
},

스크립트를 실행하면 css 폴더에 style.css 및 style.css.map이 생성됩니다.

style.css.map 파일을 피하려는 경우 스크립트는

"scripts": {
    "scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css"
},

압축된 CSS를 생성하려면 스크립트를 추가하십시오.

"scripts": {  
    "minify": "sass --watch sass/style.scss --style compressed css/style.min.css"
},

전체적으로

"scripts": {
    "scss": "sass --watch sass/style.scss css/style.css",
    "scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css",
    "minify": "sass --watch sass/style.scss --style compressed css/style.min.css",
    "minify-no-source-map": "sass --watch --no-source-map sass/style.scss --style compressed css/style.min.css"
},

5. 스크립트 실행

터미널에서 명령을 실행하여 스크립트를 실행합니다.
npm run scss또는npm run scss-no-source-map또는npm run minify또는npm run minify-no-source-map
주의사항
html 파일에서는 css 폴더에 생성된 css 파일과 연동해야 합니다.



효율성을 높이려면 vscode에서 live server extension을 사용하십시오.

행복한 코딩!!!