styled-components에서 Stylet 사용 방법 2022

Google이 검색하면 stylelint-config-styled-componentsstylelint-processor-styled-components 사용법이 나오지만, 그렇게 하면 잘 움직이지 않습니다.
시행착오 결과@stylelint/postcss-css-in-js를 알았으면 순조롭게 진행될 수 있었기 때문에 미리 기록을 남겼다.
  • stylelint와config를 제외하고 설치postcss-syntax@stylelint/postcss-css-in-js
    yarn add -D stylelint stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js
    

  • 생성stylelint.config.js, JavaScript/TypeScript 파일 응용 프로그램 설정customSyntax: '@stylelint/postcss-css-in-js'stylelint.config.js
    module.exports = {
      extends: 'stylelint-config-standard',
      overrides: [
        {
          files: ['**/*.{js,jsx,ts,tsx}'],
          customSyntax: '@stylelint/postcss-css-in-js'
        }
      ]
    }
    
  • 다음 명령을 사용하여 lint
    stylelint ./src/**/*.{css,js,jsx,ts,tsx}
    
    를 실행합니다
  • (임의) CSS in JS에서 버그 감지가 많음function-name-casefunction-no-unknown 무효화
    stylelint.config.js
    module.exports = {
      extends: 'stylelint-config-standard',
      overrides: [
        {
          files: ['**/*.{js,jsx,ts,tsx}'],
          customSyntax: '@stylelint/postcss-css-in-js',
          rules: {
            'function-name-case': null,
            'function-no-unknown': null
          }
        }
      ]
    }
    
  • 좋은 웹페이지 즐겨찾기