私はこの構造に従うReactプロジェクトに取り組んでいます
_src |
components |
Footer |
index.jsx
styles.scss
Header |
index.jsx
styles.scss
scss |
helpers.scss
variables.scss
...
main.scss
_
変数ファイルでは、css
カスタム変数を使用していたので、それらはすべて_:root
_のどこにあり、コンポーネントスタイルでアクセスできます。
暗い色を作成したいときは、SCSS関数darken
を使用したかったのですが、それらを評価せず、var(--blue)
が有効な色ではないというエラーがスローされます。
解決策として、すべての変数をSCSS変数に移動することにしましたが、プロジェクトのビルド中に、_$blue
_が定義されていないという別のエラーがスローされます。
私が使用できる独自の解決策は、すべてのスタイルファイルに変数ファイルを含めることですが、使用している構造に対してより良い解決策があるかどうかはわかりません。
同様の構造を使用して.scssファイルを整理しています。コンポーネントと同じフォルダーにスタイルを配置するのが好きです。ただし、すべてのscssファイルをmain.scss
ファイルにインポートします。これにより、DOMでのスタイルの競合を回避できます。
main.scss
import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"
コンパイル時にすべてのファイルがマージされるように、ファイルには必ずアンダースコアを付けて名前を付けてください。インポートでアンダースコアに名前を付ける必要はないことに注意してください。
_helpers.scss
_variable.scss
_style.scss
この方法を使用すると、スタイルをアプリにインポートする必要があるのは1回だけです。 index.jsx
これに取り組むために私があなたに勧めることができるさまざまな方法があります。
1-これらの変数の値を複製します。それらをvariables.scssに追加し、他のファイル(config.jsまたはconstants.jsなど)の定数として追加します。そうすれば、reactコンポーネントからこれらの値を参照できるようになります。これには、次のような欠点があります。値を変更する必要がある場合は、2か所で変更することを忘れないでください。
2- styled-components の使用を検討してください。スタイル付きコンポーネントを使用すると、スタイル内の変数または小道具を使用して、コンポーネント内でスタイルを定義できます。
3-いくつかのメカニズムを使用して、これらの変数を単一のファイルまたは環境変数として定義し、これらの値をjsファイルおよびscssファイルにインポートできるようにビルドプロセスを設定します。
使用したくない場合はstyled-component
またはcss-vars
、その後、このリンクをたどることができます。 https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
css-vars mixinを使用して、そのプロジェクト構造でカスタム変数を使用することができます。
SCSS関数を実行する前にカスタム変数を評価するオプションを提案した後、ある男が私にこのミックスインを提案しました。私はテストしたばかりで、かなりうまく機能します。