HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🌟
Programmers 최종 플젝 6조
/
[프론트] TWL
[프론트] TWL
/
StyleLint v14 Issue - Class Extends value undefined...
StyleLint v14 Issue - Class Extends value undefined...
StyleLint v14 Issue - Class Extends value undefined...

StyleLint v14 Issue - Class Extends value undefined...

생성일
Dec 2, 2021 07:35 AM
태그
Lint & Formatter
Issue
Env Settings
작성자
해결 완료
해결 완료

문제

StyleLint가 제대로 동작하지 않았다.
계속해서 다음 오류를 내뱉으며, 린트 검사를 거부하고 있었다. 이를 해결하려면 어떻게 해야할까?
notion image
 

해결방법

가장 결정적인 해답을 얻은 문서는 다음 문서였다.
결국 이슈가 닫혔던 답안은 postcss 버전을 업그레이드 하라!였다.
따라서 우리도 postcss와 postcss-scss를 업그레이드 하자.

 
이후에는, 결국 컴퓨터 입장에서는 난해할 것이다.
  • next.js 패키지 안에 있는 postcss와
  • 내 레포지토리의 postcss
둘 중 하나를 어떻게 선택할 것인지를 고민해야 한다.
다행히도, next.js에서는 이런 상황을 대비해서, postcss를 커스터마이징할 수 있는 옵션을 제공했다.
간단하다. postcss.config.js를 만들면 된다.
 
공식 문서의 추천에 따라, 기존 postcss.config.js의 영향을 해치지 않도록 그대로 만들었다.
 
이후, 다음을 추가로 설치한다.
 
결과적으로, 잘 동작해낸다!
notion image

참고자료

https://github.com/bjankord/stylelint-config-sass-guidelines/issues/203
yarn add postcss postcss-scss
module.exports = { plugins: { 'postcss-flexbugs-fixes': {}, 'postcss-preset-env': { autoprefixer: { flexbox: 'no-2009', }, stage: 3, features: { 'custom-properties': false, }, }, }, };
yarn add -D postcss-flexbugs-fixes postcss-preset-env