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使わせてって議論してるぽい
この記事が気に入ったらサポートをしてみませんか?