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";