Portfolio

문제

StyleLint가 제대로 동작하지 않았다.

계속해서 다음 오류를 내뱉으며, 린트 검사를 거부하고 있었다. 이를 해결하려면 어떻게 해야할까?

해결방법

가장 결정적인 해답을 얻은 문서는 다음 문서였다.

결국 이슈가 닫혔던 답안은 postcss 버전을 업그레이드 하라!였다.

따라서 우리도 postcss와 postcss-scss를 업그레이드 하자.


yarn add postcss postcss-scss

이후에는, 결국 컴퓨터 입장에서는 난해할 것이다.

next.js 패키지 안에 있는 postcss와

내 레포지토리의 postcss

둘 중 하나를 어떻게 선택할 것인지를 고민해야 한다.

다행히도, next.js에서는 이런 상황을 대비해서, postcss를 커스터마이징할 수 있는 옵션을 제공했다.

간단하다. postcss.config.js를 만들면 된다.

공식 문서의 추천에 따라, 기존 postcss.config.js의 영향을 해치지 않도록 그대로 만들었다.


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

결과적으로, 잘 동작해낸다!

참고자료

https://github.com/bjankord/stylelint-config-sass-guidelines/issues/203

StyleLint v14 Issue - Class Extends value undefined...

문제

해결방법

참고자료