Foundation과 Reass Sass 통합

Question

create-react-app 패키지를 사용하여 React 앱을 만들었습니다. 나는 Foundations 클래스 시스템을 사용할 수 있도록 축소 된 CSS를 포함 시켰습니다.

이제 Foundation에서 제공하는 스타일을 사용자 정의하고 싶습니다.

내가 필요한 _settings.scss, _gloabl.scss 및 foundation.scss 파일이 포함 된 노드 모듈 내에서 재단 폴더가 볼 수 있지만, 나는 그 파일을 잡아 당겨 내 src 폴더에 놓아해야한다고 생각하지 않습니다.

사용자 정의 기능을 제공하는 Foundations Sass 라이브러리를 사용하는 React 앱으로 폴더 구조를 어떻게 설정할 수 있습니까?

감사합니다.

Answer 1

이상적으로는 해당 _settings.scss 파일을 저음 아키텍처에 복사하는 것이 좋습니다. 복사가 끝나면 원하는대로 편집하십시오.

그런 다음 해당 설정 파일을 기본 컴파일 파일의 기초 구성 요소보다 먼저 가져 와서 해당 설정을 사용하게하십시오. 이것은 내가 과거에 작성한 코드의 예입니다.

// Reset css. 
@import "../../../bower_components/foundation/scss/normalize"; 

// This is the file you created for foundation settings. 
// Now all the imported foundation components will use these settings. 
@import "./base/settings"; 

// Make sure the charset is set appropriately 
@charset "UTF-8"; 

// Behold, here are all the Foundation components. 
@import "../../../bower_components/foundation/scss/foundation/components/grid"; 
@import "../../../bower_components/foundation/scss/foundation/components/accordion"; 
@import "../../../bower_components/foundation/scss/foundation/components/alert-boxes"; 
@import "../../../bower_components/foundation/scss/foundation/components/block-grid"; 
@import "../../../bower_components/foundation/scss/foundation/components/buttons"; 
@import "../../../bower_components/foundation/scss/foundation/components/clearing"; 
@import "../../../bower_components/foundation/scss/foundation/components/dropdown"; 
@import "../../../bower_components/foundation/scss/foundation/components/dropdown-buttons"; 
@import "../../../bower_components/foundation/scss/foundation/components/forms"; 
@import "../../../bower_components/foundation/scss/foundation/components/inline-lists"; 
@import "../../../bower_components/foundation/scss/foundation/components/labels"; 
@import "../../../bower_components/foundation/scss/foundation/components/pagination"; 
@import "../../../bower_components/foundation/scss/foundation/components/progress-bars"; 
@import "../../../bower_components/foundation/scss/foundation/components/range-slider"; 
@import "../../../bower_components/foundation/scss/foundation/components/reveal"; 
@import "../../../bower_components/foundation/scss/foundation/components/split-buttons"; 
@import "../../../bower_components/foundation/scss/foundation/components/switches"; 
@import "../../../bower_components/foundation/scss/foundation/components/tables"; 
@import "../../../bower_components/foundation/scss/foundation/components/tooltips"; 
@import "../../../bower_components/foundation/scss/foundation/components/type"; 
@import "../../../bower_components/foundation/scss/foundation/components/visibility";