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

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 に合わせる必要があるのは当たり前だよな、と。

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