Zenn
🛠️

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

2021/02/20に公開
Vue.js
stylus
tech

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

米：この記事の有効期限：このコードは今は動くが、いずれ動かなくなる。2021年2月20日記す

まず背景として

うう... おれ、JavaScript、わからん。

ぜんぜん、わからん。

何がしたいのか？

Stylusのグローバル変数にVue CLIの環境変数が使えたら便利やろなあ...

結論

うう... おれ、なにも書けない、なにも出来ない。

出来た事だけ書く。

  • Stylusのグローバル変数が書かれたファイルを2つ用意した。ビルド用と、開発環境用にだ！
  • Vue CLIの環境変数が書かれたファイルを２つ用意した。ビルド用と、開発環境用にだ！
  • Vue CLIの環境変数にStylusのグローバル変数が書かれたファイルのパスを記述した
  • vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートした
  • yarn serveしたら開発環境用が、yarn buildしたらビルド用が！ やったぜ！！

コード

Stylusのグローバル変数が書かれたファイル

これらはプロジェクトフォルダ内の任意の場所に置く

src/assets/stylus-global.styl


// .env.productionで呼び出されるファイル

HaikeiShoku = #cccccc

src/assets/stylus-global-development.styl


// .env.developmentで呼び出されるファイル

HaikeiShoku = #999999

Vue CLIの環境変数が書かれたファイル

これらはプロジェクトフォルダのルートに置く

.env.production


// yarn build したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global.styl'

.env.development


// yarn serve したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global-development.styl'

vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートする

これはプロジェクトフォルダのルートに置く

vue.config.js

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

App.vueとかどこかにグローバル変数を書いて試す

yarnでserveしたりbuildしたりして余韻に浸る。


<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
  background-color HaikeiShoku
</style>

vue.config.jsの補足

Yes! Good Look

このコードは動く。人類に未来が訪れる。

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

Oh! Not Work

これらのコードは動かない。人類は滅亡する。

FAIL


const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

FAIL


const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylusOptions: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

VERDAMMT!!


module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [process.env.VUE_APP_STYLUS_GLOBAL],
        },
      },
    },
  },
};

参考文献

検証環境

package.json

{
  "name": "try-globalval",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.1",
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "prettier": "^2.2.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.3.1"
  }
}

Discussion