Nuxt.jsでSASSにprocess.env.xxx

環境変数をHTMLとSASSで使いたく、しばらく方法を探していて一応みつけた。（深くは検証してない）

やりたいことは伝わると思うので、よりスマートな方法をコメントしてください。

要点

sass-loaderのoption、prependDataで行をねじ込める機能があるぽいのでそれを利用。
でも、Nuxtではsass-loaderのoptionにアクセスしずらかった。

例（breakPointを環境変数化）

①envの方法は割愛（dotenvとか）

②nuxt.config.js

...
build: {
　...
 extend(config, ctx) {
   config.module.rules.forEach((rule) => {
     rule.oneOf && rule.oneOf.forEach((item) => {
       item.use.forEach((loader) => {
         if (loader.loader === "sass-loader") {
           Object.assign(loader.options, {
             prependData: "$breakPoint: " + process.env.breakPoint + ";"
           });
         }
       })
     })
   })
 }
},

③SASS（注意：単位をつける）

@media screen and (max-width: $breakPoint + 0px)

④HTML(pug)

media="(max-width:"+process.env.breakPoint+"px)"

Nuxtとしては推奨してないと思われる。（参考URL）
Vue CLIならかんたんにできるぽい
https://qiita.com/pinalto/items/d2eeda06d49740d905ca

参考にしたURL

https://qiita.com/uto-usui/items/6b745203fa6fad577877
└loaderの場所と、optionのヒントになった

https://github.com/nuxt/nuxt.js/issues/772
└prependData使わせてって議論してるぽい