typescript react 에 post-css 적용하기 그리고 삽질기 두번째
첫번째 글
2021/01/21 - [notion/npm package] - CRA[typescript react] 에 post-css 적용[1]
CRA[typescript react] 에 post-css 적용[1]
typescript react 에 post-css 적용하기 그리고 삽질기 글쓰기에 앞서 진짜로post-css를 적용하기 힘들었다. 이유는 eject를 하는 방식과 설정 그리고 다양한 방법이 있는데, 나와 맞는 방식을 찾기 위해서
xxxxersuy.com
참고 링크
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)',
},
}),
],
};
-
postcss-import링크: CSS @import를을 사용할 수 있게 한다.
-
postcss-hexrgba 링크: post-css에서 16 진수 메서드를 추가할 수 있다.
-
autoprefixer 링크:
css
스타일이 정리가 된다. (browserslist 에 설정한 리스트에 맞춰서 -webkit-, -moz-, -o-, -ms- 같은 벤더 프리픽스를 붙여준다.) -
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 |
댓글0