리액트 프로젝트에 SCSS 스타일을 추가하는 방법

리액트 프로젝트에 SCSS 스타일을 추가하는 방법

이제 막 리액트(JavaScript에 관한 지식도 조금 습득 중)를 배우고 첫 번째 프로젝트를 구축하기 시작했습니다.html CSS/SCSS 학습 프로젝트에서 얻은 지식과 이해를 바탕으로 CSS/SCSS를 사용하여 첫 번째 리액트 프로젝트에 스타일을 추가하는 방법을 알고 싶습니다.

리액트 프로젝트에 SCSS를 추가하려면 어떻게 해야 합니까?

create-react-app을 사용하는 경우:

1) npm을 사용하여 먼저 sass 의존관계를 설치합니다.

npm install sass --save-dev

2) sass 파일을 componentName.js 파일로 Import합니다.

import '../scss/FileName.scss';

scss를 사용하는 방법은 React 개발 환경에 따라 약간 다릅니다.React는 초보자에게는 Create React App을 사용할 것을 권장합니다.Create React는 React를 학습하기에 편안한 환경이며 React에서 새로운 한 페이지짜리 애플리케이션을 구축하는 데 가장 좋은 방법이라고 합니다.자세한 것은, https://reactjs.org/docs/create-a-new-react-app.html 를 참조해 주세요.앱을 만들려면 명령줄에 다음을 입력하십시오.

npx create-react-app my-app

그 후 React는 코드 스타일링을 위해 편집할 수 있는 css 파일을 사용하여 완전한 개발 환경을 구축합니다.

create-react-app(CRA라고도 함)을 계속 사용하고 sss를 사용하는 경우 다음과 같이 입력하여 Dart Sass 라이브러리를 설치할 수 있습니다.

npm i sass --save-dev

(노드 sass는 권장되지 않으며 Dart Sass를 대신 사용하고 있다는 점에 유의하십시오.
노드 스위칭과 CRA를 함께 사용하는 방법에 대한 자세한 내용은 "Create React App에서 SAS를 사용하는 방법"을 참조하십시오.https://www.robinwieruch.de/create-react-app-with-sass-support

CRA를 넘어서면 자체 webpack.config.js를 수정하여 SCSS 파일을 컴파일 및 Import하도록 설정할 수도 있습니다.그러나 React를 처음 사용하는 경우에는 나중에 webpack.config.js를 만지작거리고 CRA를 계속 사용하는 것이 좋습니다.

create-react-app을 사용하는 경우 개발 의존관계로 sass를 추가합니다.

yarn add -D sass또는npm install --save-dev sass

다음으로 모든 CSS 파일 및 대응하는 Import를 치환/이름 변경하기만 하면 됩니다.*.scss대신*.css

먼저 프로젝트에 sass를 설치합니다.그런 다음 컴포넌트로 Import합니다.

sass 설치:

1. npm 사용:npm install sass
2. 실 사용yarn add sass

컴포넌트에 Import:import example from './example.scss'

Node-sass권장되지 않습니다.sas 를 사용합니다.

sass:

npm : npm 용용 :npm install sass --save-dev

실용사:yarn add sass

: Import:import example from './example.scss'

이 새로운 하고 있고 .webpack config 를 .react-app-rewired ★★★★★★★★★★★★★★★★★」craco, , , , , , 를 제어할 수 있습니다webpack할 수 . 설정하다

CRA로 충분하다면 위의 패키지를 복잡하게 만들 필요가 없습니다.

감사해요.

npm install sass

src 내에 테마/메뉴 폴더를 만듭니다. 밑줄이 있는 변수 mixins 파일을 추가합니다.컴포넌트 scss 파일에 scss 파일을 삽입합니다.

@import './Assets/mixins';

여기 scss를 사용한 샘플 리액트 프로젝트 링크가 있습니다.

Sass to Create React App을 추가하는 절차는 다음과 같습니다.

1. 노드 섀시 설치:

   npm install 노드 삭제

   또는

   실 추가 노드 리셋

node-sass는 권장되지 않으므로 다음 절차에 따라 sass를 설치할 수 있습니다.

   npm install sass --save-dev

   **or**

   yarn add sass

2. .css 파일을 .scss로 변환합니다.
3. App.js와 같은 React 컴포넌트에 .scss 파일을 Import합니다.

언급URL : https://stackoverflow.com/questions/67352418/how-to-add-scss-styles-to-a-react-project