web-dev-qa-db-ja.com

SCSS変数を私のReactコンポーネントに使用する方法

私はこの構造に従う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_が定義されていないという別のエラーがスローされます。

私が使用できる独自の解決策は、すべてのスタイルファイルに変数ファイルを含めることですが、使用している構造に対してより良い解決策があるかどうかはわかりません。

reactjssassnode-sass
4
abaracedo

同様の構造を使用して.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
matthew

これに取り組むために私があなたに勧めることができるさまざまな方法があります。

1-これらの変数の値を複製します。それらをvariables.scssに追加し、他のファイル（config.jsまたはconstants.jsなど）の定数として追加します。そうすれば、reactコンポーネントからこれらの値を参照できるようになります。これには、次のような欠点があります。値を変更する必要がある場合は、2か所で変更することを忘れないでください。

2- styled-components の使用を検討してください。スタイル付きコンポーネントを使用すると、スタイル内の変数または小道具を使用して、コンポーネント内でスタイルを定義できます。

3-いくつかのメカニズムを使用して、これらの変数を単一のファイルまたは環境変数として定義し、これらの値をjsファイルおよびscssファイルにインポートできるようにビルドプロセスを設定します。

1
rubentd

enter image description here 使用したくない場合はstyled-componentまたはcss-vars、その後、このリンクをたどることができます。 https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

0
Santosh Kumar

css-vars mixinを使用して、そのプロジェクト構造でカスタム変数を使用することができます。

SCSS関数を実行する前にカスタム変数を評価するオプションを提案した後、ある男が私にこのミックスインを提案しました。私はテストしたばかりで、かなりうまく機能します。

0
abaracedo