[javascript] Grunt를 통해 SASS 파일을 CSS로 변환하는 방법은 무엇인가요?

21 Nov 2023

javascript

먼저, Grunt를 설치합니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행합니다:
```
npm install -g grunt-cli
```
프로젝트 폴더에서 npm을 사용하여 Grunt를 설치합니다. 명령 프롬프트 또는 터미널에서 프로젝트 폴더로 이동한 후 다음 명령을 실행합니다:
```
npm install grunt --save-dev
```
플러그인을 설치합니다. SASS를 CSS로 변환하기 위해 grunt-contrib-sass 플러그인을 설치합니다. 프로젝트 폴더에서 다음 명령을 실행합니다:
```
npm install grunt-contrib-sass --save-dev
```

Gruntfile.js를 만들고 설정합니다. 프로젝트 폴더에 ‘Gruntfile.js’라는 파일을 생성하고 다음과 같이 설정합니다:

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          'path/to/destination/style.css': 'path/to/source/style.scss'
        }
      }
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-sass');
  
  grunt.registerTask('default', ['sass']);
};

위의 코드에서 path/to/destination/style.css와 path/to/source/style.scss를 각각 변환하려는 SASS 파일의 경로와 변환된 CSS 파일의 경로로 수정합니다.

변환을 실행합니다. 명령 프롬프트 또는 터미널에서 프로젝트 폴더로 이동한 후 다음 명령을 실행합니다:
```
grunt
```
Grunt는 SASS 파일을 CSS로 변환하고 목적지 폴더에 결과 파일을 생성합니다.

이제 Grunt를 사용하여 SASS 파일을 CSS로 변환할 수 있습니다. 참고 문서 나 프로젝트의 README 파일에서 더 자세한 설정 및 사용법을 확인하세요.