Next.jsのJavaScriptからSASSの変数を取得する方法

2021-06-04

Next.js で SASS の CSS Modules を扱っていると、ときどき JavaScript 側で SASS の変数を扱いたくなったのですが。

app.tsx 上で以下のように書いたら動くのかなーと思っていたのですが、予想に反して空のオブジェクトが返却されました。

import variables from "../../styles/variables.scss"; const MyApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => { ... // {} console.log(variables); ... };

ちなみに SASS 側のコードはこんな感じです。

:export { black: #000; }

で、調べてみたところ以下の Issue が引っかかりました。

SASS :export does not work with built-in SASS support throwing 'Selector ":export" is not pure'

@lipoolock I had to rename my variables.scss to variables.module.scss for this feature to work (from a hint here). That was all!

ということで、ファイルを CSS Modules に合わせたところ無事取得できました。

よくよく考えてみると、JavaScript 側でローダーを介して CSS を変数として扱っているので、CSS Modules に合わせる必要があるのは当たり前だよな、と。

どなたかの参考になれば幸いです。

© 2018 kk-web