Nuxt.js Tailwind CSS BEM SCSS
nuxt/tailwindモジュールでSCSSを使ってBEM記法を楽に書く
kght6123
BEM の記法で CSS を書くときに、SCSS が使えるとコードを書く量が少なくなるので
nuxt/tailwind モジュールで SCSS を使う方法を備忘録代わりにまとめました。
1. assets\css\tailwind.css ファイルの拡張子を scss に変える
そのままの意味です、ファイルの拡張子を scss に変えます。
2. nuxt.config.js nuxt/tailwind モジュールの設定を追加する
下記のような設定を、nuxt.config.js に追記します。
/*
** nuxt-tailwindcss config
*/
tailwindcss: {
cssPath: '~/assets/css/tailwind.scss',
configPath: 'tailwind.config.js',
exposeConfig: false,
config: {},
},3. node-sass sass-loader を dev でインストールする
npm install -S -D node-sass sass-loader # npmのとき
or
yarn add -D node-sass sass-loader # yarnのとき4. assets\css\tailwind.scss の中に BEM 記法で、css を書く
こんな感じで書きます。
ElementやModifierを追加するときに、親のElementやModifierを書かなくてよいので、
コードを書く量が少なくなる。
.block {
/* block */
color: #fff;
width: 100%;
&__element1 {
/* element */
width: 30px;
&_modifier1 {
/* modifier */
background-color: #ccc;
}
&_modifier2 {
/* modifier */
background-color: #111;
&_modifier3 {
/* modifier */
color: #ddd;
}
&_modifier4 {
/* modifier */
color: #ccc;
}
}
}
&__element2 {
/* element */
width: 60px;
}
}