scss 파일 생성 시 자동으로 .css 파일과 .css.map 파일 생성될 때

[생성 원인]

 

🔹 .css 파일

SCSS는 브라우저가 직접 읽을 수 없기 때문에, 브라우저가 이해할 수 있는 CSS로 컴파일해줘야 해. 이때 생성된 결과물이 .css 파일이야.

예:
style.scss → style.css

 

🔹 .css.map 파일 (소스맵)

이건 소스맵 파일로, 디버깅할 때 사용돼.
개발자 도구에서 스타일이 적용된 부분을 확인할 때, 실제로 컴파일된 .css 파일이 아닌 원래의 .scss 파일의 몇 번째 줄에서 왔는지 추적할 수 있게 도와줘.

예:
Chrome 개발자 도구에서 .scss 파일의 줄 수를 기준으로 스타일을 추적 가능함.

 

✨ 왜 생성되냐면?

SCSS를 컴파일할 때 사용하는 도구(Sass CLI, Webpack, Vite, etc.)나 설정에서 .map 파일 생성을 기본으로 하거나 명시적으로 활성화했기 때문이야.

 

 

[해결방안]

💡 만약 .css.map 파일이 필요 없으면?

사용 중인 빌드 도구에서 소스맵 생성을 꺼줄 수 있어.

 

예: Sass CLI 사용 시

sass style.scss style.css --no-source-map

 

 

1. Webpack + sass-loader 사용하기

Electron 프로젝트에서 Webpack을 쓰고 있다면 sass-loader를 사용해서 SCSS 파일을 JS에서 바로 import할 수 있어.

📦 필요한 패키지 설치:

npm install --save-dev webpack sass-loader sass css-loader style-loader

🔧 Webpack 설정 예시:

module.exports = {
  // ... 기타 설정
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',  // CSS를 <style>로 삽입
          'css-loader',    // CSS 파일을 JS로 변환
          'sass-loader'    // SCSS를 CSS로 컴파일
        ]
      }
    ]
  }
}

 

2. VS Code Sass 확장에서 .css 파일 생성 방지

혹시 VS Code에서 "Live Sass Compiler" 같은 확장을 쓰고 있다면, 설정을 바꿔서 .css 파일 생성을 끌 수 있어.

설정 변경 방법:

1. settings.json 열기 (Ctrl + Shift + P → "Preferences: Open Settings (JSON)")
2. 아래 설정 추가:

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".scss",
    "savePath": null
  }
]

 

💭 추가: 타입스크립트에서 SCSS import 시 타입 오류?

해결 방법:

npm install --save-dev vite-plugin-sass-dts

 

혹은 간단히 아래 타입 정의 파일을 프로젝트에 만들어주면 돼:

global.d.ts 혹은 declarations.d.ts 등:

 

declare module '*.scss' {
  const content: { [className: string]: string };
  export default content;
}