ReactでSCSSの変数をimportする

概要

Reactでscss moduleを扱うとき、scss内で定義した変数をReact側に持ってきたいことがたまにあるので、メモ。

やりかた

:export を使う。

colors.module.scss

$dark-087: rgba(0, 0, 0, 0.87);

:export {
    dark087: $dark-087;
}

Hoge.tsx

import style from '../style/colors.module.scss';

export default Hoge = () => (
  <div style={{
    border: `1px solid ${style.dark087}`, 
  }}>
    <p>Hello man!</p>
  </div>
);

おわり

• 大抵は className でやるけど、必要なときに。

参考

• https://github.com/css-modules/css-modules/issues/86#issuecomment-158273243