CRA[typescript react] 에 post-css 적용[2]

반응형

 

typescript react 에 post-css 적용하기 그리고 삽질기 두번째

첫번째 글

2021/01/21 - [notion/npm package] - CRA[typescript react] 에 post-css 적용[1]

CRA[typescript react] 에 post-css 적용[1]

 

참고 링크
PostCSS-cli npm 링크
PostCSS npm 링크
PostCSS-import 링크

 

위 사이트를 이용하면 대략적인 설명과 내용이 있지만, 간략한 설명을 하자면 postCSS는 Javascript plugin을 사용하여 CSS를 변환시키는 툴이다.
인라인 이미지 또는 다양한 css문법도 사용이 가능하며 변수처리, 간단하게 lint도 가능하며, CSS기능을 자동화를 했다고 생각하면 된다.

 

CLI 설치
cli를 설치를 해준다.
sudo와-global 옵션을 이용해서 전역에 설치를 한다.

    $  sudo npm install -g postcss-cli
    $  postcss --version
    8.3.1

설치가 완료되면 postcss 명령어를 이용해 설치가 되었는지 확인을 할 수 있다.

 

post-css 와 loader 설치
프로젝트에 사용할 postcss, postcss-loader를 설치를 한다.

    $ npm install --save-dev postcss postcss-loader postcss-import postcss-autoreset postcss-nested postcss-hexrgba autoprefixer

설치가 되면 postcss.config.js 파일을 최상단에 만들어준다.
이 파일에 .pcss에 대한 설정들을 작성을 해줄 수 있다.
또한 위에서 설치한 패키지들을 postcss.config.js에서 require 시켜준다.

//postcss.config.js

module.exports = {
  include: [
      'node_modules',
  ],
  plugins: [
      require('postcss-import'),
      require('postcss-nested'),
      require('postcss-hexrgba'),
      require('autoprefixer'),
      require('postcss-autoreset')({
          reset: {
              color: 'var(--basic-text-color)',
              'background-color': 'var(--body-background-color)',
              'font-size': 'var(--infonts-size)',
              'font-family': 'var(--infont-family)',
              'font-weight': 'var(--infont-weight)',
          },
      }),
  ],
};

1. postcss-import링크: CSS @import를을 사용할 수 있게 한다.

2. postcss-hexrgba 링크: post-css에서 16 진수 메서드를 추가할 수 있다.

3. autoprefixer 링크: css 스타일이 정리가 된다. (browserslist 에 설정한 리스트에 맞춰서 -webkit-, -moz-, -o-, -ms- 같은 벤더 프리픽스를 붙여준다.)

4. postcss-autoreset링크: 조건규칙을 지정하여 리셋값을 설정을 할 수 있어보인다(이 부분은 정확하지 않다.)

   //아래와 같이 기본적인 리셋을 할 수 있었다. 이건 추후에 좀 더 작업해서 문서를 작성을 할 예정
       reset: {
                 color: 'var(--basic-text-color)',
                 'background-color': 'var(--body-background-color)',
                 'font-size': 'var(--infonts-size)',
                 'font-family': 'var(--infont-family)',
                 'font-weight': 'var(--infont-weight)',
             },

CSS 파일 확장자 바꾸기

src/ 디렉토리 내부에 있는 .css파일들을 .pcss로 변경을 해준다.
위 이미지를 참고해보면 .pcss로 변경을 했을 때 아이콘이 변한다.

 

리액트 내부 파일에 css 파일 import 제거
리액트 코드 내부에 .css 파일을 import 한 것이 있다면 삭제를 해준다.

 

실행 스크립트 작성
package.json 파일에서 npm-run-all을 이용해서 postCSS를 빌드하여 .css파일을 생성하고, 리액트를 실행 시키려고 한다.

package.json 파일에 실행 스크립트를 수정한다.

참고 화면

//package.json
{ 
    ...
    "scripts": {
      "start": "npm-run-all -p cssbuild:css start-js",
      "start-js": "react-scripts start",
      "cssbuild:css": "postcss src/index.pcss -o src/index.css -w"
    },
    ...
}

실행
아래의 명령어로 실행을 하면 작성이 된다.

    $ npm start

    > custom_react@0.1.0 start
    > npm-run-all -p cssbuild:css start-js


    > custom_react@0.1.0 cssbuild:css
    > postcss src/index.pcss -o src/index.css -w


    > custom_react@0.1.0 start-js
    > react-scripts start

실행이 된 스크립트를 보면 start, cssbuild 등 npm-run-all 패키지가 정상적으로 작동이 되는 것을 볼 수 있다.
또한 > postcss src/index.pcss -o src/index.css -w 로 .pcss 파일이 .css 파일로 만들어지는 모습을 볼 수 있다.

실행전 화면 .css 파일이 없다.

실행후 화면 .css 파일이 생성이 됬다.

정상적으로 실행이 정상적으로 된다.

반응형

'notion > npm package' 카테고리의 다른 글

mockserver 를 이용해 mock서버 만들기[3]  (0)	2021.02.04
mockserver 를 이용해 mock서버 만들기[2]  (0)	2021.02.04
mockserver 를 이용해 mock서버 만들기[1]  (1)	2021.02.02
CRA[typescript react] 에 post-css 적용[2]  (0)	2021.01.21
CRA[typescript react] 에 post-css 적용[1]  (0)	2021.01.21
React or javacript npm-run-all 으로 npm 스크립트 여러개 실행하는 방법  (0)	2021.01.20