はじめに
Atomic Design ～堅牢で使いやすいUIを効率良く設計する 、この本があまりに素晴らしくて、写経をしたいんだけど、実践で利用するのは Vue.js なので、読み替えて写経する必要がありました。
で、 https://github.com/katsuhiko/laravel-mix-template こちらで、 Docker + Laravel Mix で気軽に始めたんだけれども、コンポーネント内に CSS を閉じこめるところでつまづきました。
Vue.js には、 スコープ付き CSS があるんですが、 slot を使った時や、子コンポーネントの扱いでイマイチな気がして、 CSS Modules を使うことにしたんですが、少し手間がかかったので、記録として残します。
webpack.mix.js の編集
CSS Modules を有効にするためには、 webpack.config.js の設定を追加する必要があります。
Quick webpack configuration の「2.」 の方法、mix.webpackConfig() を利用する方法を今回は使います。
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
// CSS Modules を有効にするために以下を追加
.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
loaders: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]',
},
},
],
},
],
},
});
component の作り方
設定が終われば、 CSS Modules を使ったコンポーネントの作り方は簡単です。
style タグで module 属性を指定し、CSSクラスを指定するときに $style オブジェクト経由で bind するのみです。
<template>
<span :class="$style.balloon"><slot></slot></span>
</template>
<style module>
.balloon {
background-color: #1a1a1a;
border-radius: 2px;
color: white;
display: inline-block;
font-size: 0.8rem;
padding: 0.4rem 0.5rem;
position: relative;
}
.balloon::after {
border-color: #1a1a1a transparent transparent transparent;
border-style: solid;
border-width: 3px 3px 0 3px;
bottom: 0;
content: "";
display: block;
height: 0;
left: 50%;
position: absolute;
transform: translate(-50%, 100%);
width: 0;
}
</style>
<script>
export default {
}
</script>
上記コンポーネントを利用するために、テンプレートとして以下のように記述すると
<balloon-el>次へ</balloon-el>
HTML として出力されるときには以下のようになっています。
<span class="balloon_3tlcaaYA">次へ</span>
CSS Modules になっています！
さいごに
Laravel Mix はビルドの動きを知らなくても気軽に使える利点はあるのですが、一歩先に進もうとすると、やはり動きを知る必要が出てきます。
導入系記事は多いんですが、カスタマイズになると情報・記事が少ない気もします。案外、一歩先に進む人は、自前で Webpack を整備するのかな。それとも Vue cli かな。
しばらくは、Laravel Mix を使おうと思うのですが、Storybook との兼ね合いでも、一手間かかりそうな気がしています。
Rails の Assets Pipeline は、自分には合わない感じだったので、もうちょっと Vue.js のことが理解できるようになったら、 Laravel Mix も合わなく感じでしまうかもしれないなーっと、CSS Modules を調べていて思いました。