이온디

SCSS 파일을 CSS로 컴파일하고 압축(minify)하는 방법은 여러 가지가 있습니다:

커서AI SCSS 변환 방법 안내

1. VS Code 확장프로그램 사용:

1. "Live Sass Compiler" 설치

• Ctrl/Cmd + Shift + X
• "Live Sass Compiler" 검색
• Install 클릭

2. VS Code 전역 설정:

3.. settings.json에 설정 추가:

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"  // SCSS 파일과 같은 레벨의 css 폴더
        },
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.autoprefix": true,
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.autoCompile": true,  // 자동 컴파일 활성화
    "liveSass.settings.excludeList": [             // 제외할 폴더
        "**/node_modules/**",
        ".vscode/**"
    ]

}

4. 하단 상태 바의 "Watch Sass" 클릭

• VS Code 하단 상태 바의 "Watch Sass" 클릭
• 이제 SCSS 파일을 저장할 때마다 자동으로:
• style.scss → css/style.css (일반)
• style.scss → css/style.min.css (압축)

{
    "key": "workbench.action.terminal.new",        // VS Code 시작 시
    "command": "liveSass.command.watchMySass",     // Sass Watch 자동 시작
    "when": "workbench.view.explorer.active"
}

2. npm을 사용하는 방법:

# sass 설치

npm install -g sass

# 한 번 컴파일

sass input.scss output.css --style compressed

# 파일 변경 감지

sass --watch input.scss output.css --style compressed

3. Gulp를 사용하는 방법:

// gulpfile.js

const gulp = require('gulp');

const sass = require('gulp-sass')(require('sass'));

const rename = require('gulp-rename');

gulp.task('sass', function() {

return gulp.src('scss/**/*.scss')

.pipe(sass()) // 일반 CSS

.pipe(gulp.dest('css'))

.pipe(sass({outputStyle: 'compressed'})) // 압축된 CSS

.pipe(rename({ suffix: '.min' }))

.pipe(gulp.dest('css'));

});

gulp.task('watch', function() {

gulp.watch('scss/**/*.scss', gulp.series('sass'));

});

각각의 장단점:

npm/sass