vue.jsで@materialのscssをimportするだけで消耗した話

<style lang="scss">
    @import '@material/button/mdc-button';
</style>

これをするだけでどれだけ消耗したかをつらつらと語る。

error1

File to import not found or unreadable: @material/button/mdc-button

どうやら、「.scss」の拡張子が解決できていないよう。
webpackを設定した。

webpack.config.js

    resolve: {
      extensions: ['.js', '.json', '.vue', '.scss'],
      ...
    },

error2

File to import not found or unreadable: @material/base/mixins.

どうやら、「_」から始まるファイルは、sassではpartial fileとしてimportできるようなのだが、それをsass-loaderでやるには、下記の設定が必要なそうだ。
vue-loaderの設定を追加した。

webpack.config.js

    module: {
      rules: [
        // VUE
        {
          test: /\.vue$/,
          use: [{
            loader: 'vue-loader',
            options: {
              loaders: {
                scss: [
                  {
                    loader: 'sass-loader',
                    options: {
                      // ここ
                      includePaths: ['node_modules'],
                    }
                  }
                ],
              }
            }
          }],
          exclude: /(node_modules)/,
        },
...

error3

Module parse failed: Unexpected character '@'
You may need an appropriate loader to handle this file type.
> @keyframes mdc-ripple-fg-radius-in {
|   from {
|     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

sass-loaderだけでは、足りないらしい。
https://vue-loader.vuejs.org/guide/pre-processors.html#sass
ここに書いてある通り、'vue-style-loader'と'css-loader'を追加した。

webpack.config.js

    module: {
      rules: [
        // VUE
        {
          test: /\.vue$/,
          use: [{
            loader: 'vue-loader',
            options: {
              loaders: {
                scss: [
                  'vue-style-loader',
                  'css-loader',
                  {
                    loader: 'sass-loader',
                    options: {
                      includePaths: ['node_modules'],
                    }
                  }
                ],
              }
            }
          }],
          exclude: /(node_modules)/,
        },
...

おやすみ

Compiled successfully.