React에서 Sass를 사용하는 방법

Sass는 현재 React 프로젝트에서 사용할 수 있는 향상된 CSS 버전입니다.

Sass(구문적으로 멋진 스타일 시트)는 CSS를 더욱 강력하게 만드는 추가 기능을 갖춘 확장입니다. Sass의 가장 좋은 점은 CSS와의 호환성입니다. 즉, React와 같은 JavaScript 프레임워크를 사용하여 웹 개발 프로젝트에서 Sass를 사용할 수 있습니다.

그러나 바닐라 CSS와 달리 Sass를 사용하려면 약간의 설정이 필요합니다. 간단한 React.js 프로젝트를 설정하고 Sass를 통합하여 이것이 어떻게 작동하는지 알아보세요.

다른 CSS 프로세서와 마찬가지로 Sass는 기본적으로 React에서 지원되지 않습니다. React에서 Sass를 사용하려면 Yarn 또는 npm과 같은 패키지 관리자를 통해 타사 종속성을 설치해야 합니다.

다음을 실행하여 npm 또는 Yarn이 로컬 컴퓨터에 설치되어 있는지 확인할 수 있습니다.npm --버전또는원사 --버전 . 터미널에 버전 번호가 표시되지 않으면 먼저 npm 또는 Yarn을 설치하세요.

이 가이드를 따르려면 create-react-app을 사용하여 간단한 React.js 앱을 설정할 수 있습니다.

먼저 명령줄을 사용하여 React 프로젝트를 생성하려는 폴더로 이동합니다. 그런 다음 다음을 실행합니다.npx create-react-app <앱 이름> . 프로세스가 완료되면 다음을 사용하여 앱 디렉토리를 입력하십시오.CD <앱 이름> . 다음 콘텐츠를App.js파일을 시작으로 사용:

기본 React 프로젝트를 설정했다면 이제 Sass를 통합할 차례입니다.

npm이나 Yarn을 통해 Sass를 설치할 수 있습니다. 다음을 실행하여 원사를 통해 설치하세요.원사 추가또는 npm을 선호하는 경우 다음을 실행하세요.npm 설치 sass . 패키지 관리자는 최신 버전의 Sass를 프로젝트의 종속성 목록에 추가합니다.패키지.json파일.

프로젝트 폴더에서 App.css 및 index.css의 이름을 각각 App.scss 및 index.scss로 바꿉니다.

해당 파일의 이름을 바꾼 후에는 다음과 같이 새 파일 확장자와 일치하도록 App.js 및 index.js 파일의 가져오기를 업데이트해야 합니다.

이 시점부터 생성하는 모든 스타일 파일에 .scss 확장자를 사용해야 합니다.

Sass의 가장 중요한 장점 중 하나는 변수와 믹스인을 사용하여 깨끗하고 재사용 가능한 스타일을 작성하는 데 도움이 된다는 것입니다. React에서 어떻게 동일한 작업을 수행할 수 있는지는 분명하지 않을 수 있지만 일반 JavaScript 및 HTML로 작성된 프로젝트에서 Sass를 사용하는 것과 크게 다르지 않습니다.

먼저 새 항목을 만듭니다.스타일당신의 폴더소스 폴더. Styles 폴더에서 두 개의 파일을 만듭니다._변수.scss그리고_mixins.scss . _variables.scss에 다음 규칙을 추가합니다.

그리고 _mixins.scss에 다음을 추가합니다:

그런 다음 다음과 같이 App.scss에서 변수와 믹스인을 가져옵니다.

App.scss 파일에서 변수와 믹스인을 사용하세요.

이것이 React에서 변수와 믹스인을 사용하는 방법입니다. 믹스인과 변수 외에도 함수와 같은 Sass의 다른 모든 멋진 기능을 사용할 수도 있습니다. 제한은 없습니다.

Sass는 재사용 가능한 CSS 코드를 작성하는 데 꼭 필요한 CSS 위에 더 많은 기능을 제공합니다.

npm 또는 Yarn을 통해 sass 패키지를 설치하고 CSS 파일을 .scss 또는 .sass로 업데이트한 다음 새 파일 확장자를 사용하도록 가져오기를 업데이트하여 React에서 Sass 사용을 시작할 수 있습니다. 그 후에는 React에서 SCSS 작성을 시작할 수 있습니다.

Alvin Wanjala는 MakeUseOf의 Android 수석 작가이자 소프트웨어 개발자입니다. 2013년 첫 기기를 구입한 후 생태계에 푹 빠진 열렬한 Android 사용자인 그는 사용자가 기기를 최대한 활용할 수 있도록 돕는 데 중점을 두고 있습니다. 그러나 그는 매일 여러 플랫폼을 사용하는 기술 애호가로서 iOS, Mac, 소셜 미디어 및 광범위한 소비자 기술 분야의 기타 주제도 다룹니다. Alvin은 2018년에 개인 기술 블로그에 글을 쓰기 시작했고 2019년에는 TechTrendsKE에서 전문적으로 글을 쓰기 시작했습니다. 그는 일반 기술 뉴스와 제품 리뷰를 다루었습니다. 그 이후로 그의 작품은 XDA Developers 및 기타 여러 기술 웹사이트에 소개되었습니다. 글쓰기 외에도 소프트웨어 개발에 중점을 두고 IT 분야 2학위를 취득하고 있습니다.