JavascriptとSassの間で変数を共有する方法

環境間で変数を共有するのはプログラミングされた聖杯です。以下はJavascriptと
Sass(またはCSS！)間で変数を共有する方法です。
大型の単一ページアプリケーションの台頭に伴い、JavascriptとCSSはますます織り交ぜられている。通常、2つの値の間で値を複製する（例えば、ReactのCSSTrasitionGroupと一緒に使用されるアニメーションの継続時間、またはブランドの色をグラフィカルライブラリに渡す）。しかし、同じ値を持つ二つのレプリカを維持することは、一つのレプリカだけを更新し、最終的には落胆させるエラーを引き起こすことは避けられない。幸い、webpackとCSSモジュールを使って、もっといい方法があります。このブログ記事では、上記の例を通じて、アニメーションの持続時間を共有するために、変数CSSTrasitionGroupをスクリプトとスタイルの間で共有する方法を検討します。
第一歩は私達をインストールする依存項です。

npm install sass-loader node-sass webpack --save-dev

次に、私たちはJavascriptから私たちのSassコードにアクセスできるようにwebpackを構成する必要があります。

  // webpack.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
     }
    ]
   }
  }

今から面白い部分です。Sassで実際の変数値を定義し、Javascriptにエクスポートします。CSSモジュールにはシンプルで実用的なプログラムがあります。この：export命令の動作原理は、基本的にES 6のexportキーワードに似ています。あなたのSassコードはJavascriptで使用する変数名と関連する値を含むオブジェクトをエクスポートします。これらの値は文字列としてエクスポートされます。

  // styles/animation.scss
  $animation-length: 250;
  $animation-length-ms: $animation-length + 0ms;

  :export {
   animationMillis: $animation-length-ms;
  }

  .component-enter {
   ...

   transition: all $animation-length-ms ease-in;
  }

まず変数に整数値を宣言し、他の変数に0 msを追加します。このようにすれば、「250 ms」ではなく「250 ms」がJavascriptの方が解析しやすい（0 msの数字を強制的にmsに挿入する）ということだけを導き出すことができます。
現在、Javascriptでは、スタイルシートからスタイルを導入し、エクスポートした変数からヒントを導き出すだけでいいです。

// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
 transitionName="component"
 transitionEnterTimeout={millis}
 transitionLeaveTimeout={millis}
/>

...

この方法は非常に簡単ですが、JavascriptとSassの間で同期して変更するトラブルを避けると、倍になります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。