[Stylelint] scss 일관적인 스타일 규칙 적용시키기

Nextjs(13.5.2) App router에서의 적용기입니다.

 

stylelint란?

 

css, scss와 같은 스타일에 규칙을 정의할 수 있는 lint로 아래와 같은 장점이 있다.

• 스타일 오류를 방지
• 일관적인 스타일 규칙 적용 (플러그인으로 규칙 커스텀 가능)
• 스타일 단위 테스트 지원 

 

특히 나의 경우에는 eslint에서 import 순서를 일관적으로 정렬하는 것처럼 css 속성 역시 일관적으로 정렬해주는 것이 굉장히 만족스러웠다. (예를 들면 position 관련 속성은 제일 위로 정렬이 된다.) 

 

SCSS로 설정하기 

• 우선 아래와 같이 패키지를 설치했다.
• stylelint-config-prettier-scss : prettier와 충돌되는 stylelint SCSS 규칙을 비활성화 

    "stylelint": "^15.10.3",
    "stylelint-config-prettier-scss": "^1.0.0",
    "stylelint-config-property-sort-order-smacss": "^9.1.0",
    "stylelint-config-recommended-scss": "^13.0.0",

 

그 뒤 root 위치에 stylelint 설정 파일을 추가해준다. 

 

.stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-recommended-scss',
    'stylelint-config-prettier-scss',
    'stylelint-config-property-sort-order-smacss',
  ],
  plugins: ['stylelint-scss'],
  # 검사를 마친 기본 scss 파일은 이후 더이상 검사하지 않음 
  ignoreFiles: ['src/styles/reset.scss', 'src/styles/common.scss'],
  rules: {
    'at-rule-no-unknown': null,
    # 클래스, 키프레임 이름이 소문자로 시작하고 중간에 하이픈이나 숫자가 있으면 통과
    'selector-class-pattern': '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
    'keyframes-name-pattern': /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/,
    'no-descending-specificity': null,
    'string-quotes': 'single',
    'scss/at-rule-conditional-no-parentheses': null,
  },
};

 

간편하게 사용하기 위해 script 명령을 추가해주었다. 

  "scripts": {
    "lint-css": "stylelint --ignore-path .gitignore '**/*.scss'",
  },

 

특히 pnpm lint-css --fix를 해주면 오류 출력 뿐만 아니라 자동으로 오류를(주로 정렬 문제) 싹 고쳐준다!