About

本サイトについて

趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。

プロフィール

kght6123

佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。

kght6123.page

nuxt/tailwindモジュールでSCSSを使ってBEM記法を楽に書く

2021-08-14T16:24:10.816Z

TailwindでBEM記法を使ったCSSを書くことが多いので、SCSSを使って楽にしました

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 を書く

こんな感じで書きます。

ElementModifierを追加するときに、親のElementModifierを書かなくてよいので、

コードを書く量が少なくなる。

.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;
  }
}

参考サイト