tag:crieit.net,2005:https://crieit.net/tags/stylus/feed
「stylus」の記事 - Crieit
Crieitでタグ「stylus」に投稿された最近の記事
2021-02-20T20:10:54+09:00
https://crieit.net/tags/stylus/feed
tag:crieit.net,2005:PublicArticle/16695
2021-02-20T20:03:15+09:00
2021-02-20T20:10:54+09:00
https://crieit.net/posts/Vue-CLI-Stylus
Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし
<h1 id="Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし"><a href="#Vue+CLI%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%A7Stylus%E3%81%AE%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%82%92%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%82%8B%E3%81%97">Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし</a></h1>
<p>米:この記事の有効期限:このコードは今は動くが、いずれ動かなくなる。2021年2月20日記す</p>
<h2 id="まず背景として"><a href="#%E3%81%BE%E3%81%9A%E8%83%8C%E6%99%AF%E3%81%A8%E3%81%97%E3%81%A6">まず背景として</a></h2>
<p>うう... おれ、JavaScript、わからん。</p>
<p>ぜんぜん、わからん。</p>
<h3 id="何がしたいのか?"><a href="#%E4%BD%95%E3%81%8C%E3%81%97%E3%81%9F%E3%81%84%E3%81%AE%E3%81%8B%EF%BC%9F">何がしたいのか?</a></h3>
<p>Stylusのグローバル変数にVue CLIの環境変数が使えたら便利やろなあ...</p>
<h2 id="結論"><a href="#%E7%B5%90%E8%AB%96">結論</a></h2>
<p>うう... おれ、なにも書けない、なにも出来ない。</p>
<p>出来た事だけ書く。</p>
<ul>
<li>Stylusのグローバル変数が書かれたファイルを2つ用意した。ビルド用と、開発環境用にだ!</li>
<li>Vue CLIの環境変数が書かれたファイルを2つ用意した。ビルド用と、開発環境用にだ!</li>
<li>Vue CLIの環境変数にStylusのグローバル変数が書かれたファイルのパスを記述した</li>
<li>vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートした</li>
<li>yarn serveしたら開発環境用が、yarn buildしたらビルド用が! やったぜ!!</li>
</ul>
<h2 id="コード"><a href="#%E3%82%B3%E3%83%BC%E3%83%89">コード</a></h2>
<h3 id="Stylusのグローバル変数が書かれたファイル"><a href="#Stylus%E3%81%AE%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB">Stylusのグローバル変数が書かれたファイル</a></h3>
<p>これらはプロジェクトフォルダ内の任意の場所に置く</p>
<p><strong>src/assets/stylus-global.styl</strong></p>
<pre><code><br />// .env.productionで呼び出されるファイル
HaikeiShoku = #cccccc
</code></pre>
<p><strong>src/assets/stylus-global-development.styl</strong></p>
<pre><code><br />// .env.developmentで呼び出されるファイル
HaikeiShoku = #999999
</code></pre>
<h3 id="Vue CLIの環境変数が書かれたファイル"><a href="#Vue+CLI%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB">Vue CLIの環境変数が書かれたファイル</a></h3>
<p>これらはプロジェクトフォルダのルートに置く</p>
<p><strong>.env.production</strong></p>
<pre><code><br />// yarn build したときに呼び出されるファイル
VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global.styl'
</code></pre>
<p><strong>.env.development</strong></p>
<pre><code><br />// yarn serve したときに呼び出されるファイル
VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global-development.styl'
</code></pre>
<h3 id="vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートする"><a href="#vue.config.js%E3%81%A7Stylus%E3%81%AE%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B">vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートする</a></h3>
<p>これはプロジェクトフォルダのルートに置く</p>
<p><strong>vue.config.js</strong></p>
<pre><code>const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylus: {
stylusOptions: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
},
};
</code></pre>
<h3 id="App.vueとかどこかにグローバル変数を書いて試す"><a href="#App.vue%E3%81%A8%E3%81%8B%E3%81%A9%E3%81%93%E3%81%8B%E3%81%AB%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E8%A9%A6%E3%81%99">App.vueとかどこかにグローバル変数を書いて試す</a></h3>
<p>yarnでserveしたりbuildしたりして余韻に浸る。</p>
<pre><code><br /><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>
</code></pre>
<h3 id="vue.config.jsの補足"><a href="#vue.config.js%E3%81%AE%E8%A3%9C%E8%B6%B3">vue.config.jsの補足</a></h3>
<h4 id="Yes! Good Look"><a href="#Yes%21+Good+Look">Yes! Good Look</a></h4>
<p>このコードは動く。人類に未来が訪れる。</p>
<pre><code>const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylus: {
stylusOptions: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
},
};
</code></pre>
<h4 id="Oh! Not Work"><a href="#Oh%21+Not+Work">Oh! Not Work</a></h4>
<p>これらのコードは動かない。人類は滅亡する。</p>
<p><strong>FAIL</strong></p>
<pre><code>const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylus: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
};
</code></pre>
<p><strong>FAIL</strong></p>
<pre><code>const path = require("path");
module.exports = {
css: {
loaderOptions: {
stylusOptions: {
import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
},
},
},
};
</code></pre>
<p><strong>VERDAMMT!!</strong></p>
<pre><code>module.exports = {
css: {
loaderOptions: {
stylus: {
stylusOptions: {
import: [process.env.VUE_APP_STYLUS_GLOBAL],
},
},
},
},
};
</code></pre>
<h2 id="参考文献"><a href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE">参考文献</a></h2>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://cli.vuejs.org/guide/mode-and-env.html#modes">Modes and Environment Variables | Vue CLI</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://cli.vuejs.org/config/">Configuration Reference | Vue CLI</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/webpack-contrib/stylus-loader">GitHub - webpack-contrib/stylus-loader: A stylus loader for webpack.</a></li>
</ul>
<h2 id="検証環境"><a href="#%E6%A4%9C%E8%A8%BC%E7%92%B0%E5%A2%83">検証環境</a></h2>
<p><strong>package.json</strong></p>
<pre><code>{
"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"
}
}
</code></pre>
fkuMnk