Vue + dart-sass + Webpack でCSSモジュールを使うため設定

アップデート

• 2021.12.11
  • fibersが非推奨になったので該当箇所消しました。
• 2021.3.7
  • 現在、cssModulesがここに書いた設定だと使えなくなっています。やり方がわかりましたら追記します。

cssModules のオプション記述位置が違った

公式に書かれた設定だけだと css modules が実現できなかったので調べたところ、Vue Loader v15 から色々変わった模様。
Vueのルール部分ではなく、CSSのルール部分に書くようです。

参考：$style is undefined when I used <style lang="scss" module>

せっかくなので dart-sass に乗り換える（2020.12.18追記）

これまで node-sass を使っていたのですが、いい機会だから dart-sass に乗り換えます。
dart-sass のnpmは sass です。

$ yarn add -D sass

以前の設定

webpack.config.js の設定から cssModules を使う前のcssとscssの部分を抜粋しました。

{
  module: {
    rules: [
      {
        test: /\.scss/,
        loader: 'vue-style-loader!css-loader!sass-loader',
      },
    ],
  }
}

変更後の設定

{
  module: {
    rules: [
      {
        test: /\.scss/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // cssModules を使うために必要な設定
              modules: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              // dart-sass を使うのに必要な設定
              implementation: require('sass'),
# fibers は非推奨になりました
#              sassOptions: {
#                fiber: require('fibers'),
#              },
            },
          },
        ],
      },
    ],
  }
}

Vueとcss部分の抜粋

{
  // 省略
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              loaders: {
                js: 'babel-loader',
              },
            },
          },
        ],
      },
      {
        test: /\.scss/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // cssModules を使うために必要な設定
              modules: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              // dart-sass を使うのに必要な設定
              implementation: require('sass'),
# fibers は非推奨になりました
#              sassOptions: {
#                fiber: require('fibers'),
#              },
            },
          },
        ],
      },
    ],
  },
}

webpack.config.js がどんどん長くなりますねｗ

コンポーネント内での記述

style の記述

こんな感じ。

<template>
  <div :class="$style.foo">hogehoge</div>
</template>

<style lang="scss" module>
.foo {
  background-color: rgba(#000, 0.6);
}
</style>

動作確認

this.$style に格納されているので console.log() で確認できます。

mounted(){
  console.log('style', this.$style);
}

cssModules 以外の class も併用する

cssModules、クラス名の文字列、クラス名の入った変数を併用するなら配列で渡します。

<template>
  <div :class="[$style.foo, 'class-name', myClass]">
    hogehoge
  </div>
</template>