[Issue] 브라우저 개발자도구 - sass className - hash 이슈

이슈발생

pnpm 빌드 후 localhost에서 실행 시 이슈 <section class="RjBgNqPltg8NRumLU7iQ"> 개발자 도구에서 확인 시 className이 해싱되어 빌드됨.

 

 

에러 발생 소스

<section class="RjBgNqPltg8NRumLU7iQ">...</section>

 

이슈 발생 원인

• Sass 클래스 이름이 빌드 후 변형되는 이슈는 주로 CSS 모듈 또는 CSS-in-JS 라이브러리 설정에서 발생합니다. 이러한 도구들은 로컬 클래스 이름을 글로벌로 유니크하게 만들기 위해 클래스 이름을 해싱합니다. 이 과정에서 개발 환경과 프로덕션 환경에서 클래스 이름이 다르게 나타날 수 있습니다.

 

해결방법

• 해당 프로젝트에서 원인은 webpack.config.js 설정 > css-loader 설정에 modules 옵션을 추가합니다. 이 옵션을 통해 CSS 모듈 기능을 활성화할 수 있습니다.

{
  // ... 기타 설정
  module: {
    rules: [
      // ... 다른 규칙들
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]__[hash:base64:5]', // 클래스 이름 형식 지정
              },
            },
          },
          'sass-loader',
        ],
      },
      // ... 다른 규칙들
    ],
  },
  // ... 기타 설정
}