2019年のお気に入り曲プレイリスト、その3です
過去のプレイリストはこのへんに。
日々のお気に入り紹介は、別でやってる音楽ブログでやってます
2019年のお気に入り曲プレイリスト、その3です
過去のプレイリストはこのへんに。
日々のお気に入り紹介は、別でやってる音楽ブログでやってます
nuxt.js で開発するとき、自分で定義した scss の変数や mixinをどのコンポーネントからでもグローバルに使えるようにしたい、というメモ
まずは共通のファイルを、/assets/styles/_var.scss
あたりに作り、その中で各種変数などを定義しておきます。
// assets/styles/_var.scss $theme-color: #ccc;
これらを呼び出す方法は2つあって、
必要なタイミングで、この _var.scss
を import すればよいですね
// components/sample.vue <style lang="scss"> @import "assets/styles/var"; .title { color: $theme-color; } </style>
こんな風に使いたいところで importしてあげれば、まあそりゃ当然だろという感じですが、変数等が使えます
あ、sass-loader
と node-sass
はインストールしておいてください
yarn add --dev sass-loader node-sass
毎回書くのはめんどくさいので、このモジュールを使う方法が楽ですね。
まずはモジュールをインストール。
yarn add --dev @nuxtjs/style-resources
んで、nuxt.config.js
に設定を追記します
export default { modules: [ '@nuxtjs/style-resources' ], styleResources: { scss: [ '~assets/styles/_var.scss' ] }, }
module として @nuxtjs/style-resources
を使い、常に読み込ませる scss ファイルを styleResources
として指定しておく、という設定になります。
こうすると nuxt.js のどこからでも、自分で定義した変数や mixin が呼び出せるようになるかんじです。
ちなみに、以前は nuxt-sass-resources-loader
というモジュールを使っていましたが、そちらは現在はサポートが終わっているっぽいので要注意。
「レガシーコードからの脱却 ー ソフトウェアの寿命を延ばし価値を高める9つのプラクティス」
オライリー本。
レガシーコードからの脱却 ―ソフトウェアの寿命を延ばし価値を高める9つのプラクティス
タイトルの時点でかなり興味深いのですが、翻訳者のひとり Ryuzee さんによりますと
著者が強調するのは、そのレガシーコードへの対応としていちばん大事なのは「最初からレガシーコードを作らない」という点です。 あとから品質を上げるのは、最初から品質を高く保つのに比べて何倍ものコストがかかるので、後からレガシーコードを直さなくて済むようにする。 そのためにどうすれば良いのかに紙面の多くを割いています。
何それめっちゃ気になる。つまり「レガシーコードを修正する本」ではないと。いかにして「レガシーコードを作らないようにするか」って話だと。ということで読みました。
前半は、なぜレガシーコードが生み出されるのか、という観点。
いわゆるウォーターフォール的なやり方だと、途中変更のたびにレガシー感が増えてくるよね、アジャイルな考えでやっていかないとね、という感じ。最初に目次を見た段階では、ここまでアジャイル推しな内容になってるとは思わなかったなー
そういえばこの本、序文をウォード・カニンガムが書いてるんですよね。Wiki の生みの親。アジャイル・マニフェストの17人のメンバーのうちの一人。
なるほどなるほど。
で、実際のプラクティスの部分も。読んでいて、まあそりゃそうだよな、という納得感が非常に高い。感覚としてなんとなく分かってた、という話がきれいに言語化されている感じ。
めちゃくちゃ目新しい話はないです。他の書籍でも見るようなプラクティスが上手くまとまっている。ただ、それらを丁寧に実践することはラクなことではないし、実践されているであろうからこその、納得感の高い言語化。
ええ本でした。
結論だけ書くと dart-sass を使って解決した
Chromebook C101PA, 便利に使っています。いまのところコード書く以外の作業はだいたい困らずにできる。バックエンドのコード書く作業なら、最悪 cloud9 でやればなんとかなる。
Chromebook クロームブック ASUS ノートパソコン 10.1型WXGA液晶 日本語キーボード C101PA シルバー グーグル Google
フロントエンド開発はどうだろう、と思って Chromebook の Linux にフロントエンドの開発環境作るのを試してみました。とりあえず node.js 入れて nuxt.js 入れて scss も入れて…… 進めてみたところ、node-scss のところで以下のようなエラーが
> node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-arm64-64_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/linux-arm64-64_binding.node": HTTP error 404 Not Found
あら node-sass が入らない。失敗する。
GitHubのイシューを見てみたところ、どうやら arm64系のCPUはサポート外らしいです
残念ですがサポート外と言われてしまってはしょうがない。node-sass はあきらめる……
scss をビルドするのに、他の方法はないのかなと思ったら
こっちを試してみます。dart-sass は npm で入れるならパッケージ名は sass
です、ちょっとややこしいな。
npm i sass
ふつうに入った〜
特に設定なしで nuxt.js からも使えたので、これでいけそうです