米:この記事の有効期限:このコードは今は動くが、いずれ動かなくなる。2021年2月20日記す
うう... おれ、JavaScript、わからん。
ぜんぜん、わからん。
Stylusのグローバル変数にVue CLIの環境変数が使えたら便利やろなあ...
うう... おれ、なにも書けない、なにも出来ない。
出来た事だけ書く。
これらはプロジェクトフォルダ内の任意の場所に置く
src/assets/stylus-global.styl
// .env.productionで呼び出されるファイル
HaikeiShoku = #cccccc
src/assets/stylus-global-development.styl
// .env.developmentで呼び出されるファイル
HaikeiShoku = #999999
これらはプロジェクトフォルダのルートに置く
.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
const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylus: {
stylusOptions: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
},
};
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>
このコードは動く。人類に未来が訪れる。
const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylus: {
stylusOptions: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
},
};
これらのコードは動かない。人類は滅亡する。
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"
}
}
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント