おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

Nuxt v2（webpack v4）+ sass-resources-loader + Karma

Nuxt.js Webpack

Vue Fes Japan の Web サイト（ソースコード）の Nuxt のバージョンを v1 -> v2 に上げるときに sass-resources-loader まわりの修正がややこしかったのでメモ。

nuxt-sass-resources-loader -> @nuxtjs/style-resources

nuxt-sass-resources-loader のサポートが終了し、Nuxt v2 が利用している webpack v4 では、ビルド時に

ERROR  Cannot read property 'options' of undefined

が発生するようになった。

-> @nuxtjs/style-resources へ乗り換えた。

// nuxt.config.js
export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
    ]
  }
}

karma.config.js 内の webpack 設定

Nuxt は webpack の設定を内部で隠蔽してくれているんだけど、karma.config.js の中で webpack の設定を書く必要があったので編集した。

  • webpack v4 + Vue Loader v15 を使うようになったので Migrating from v14 | Vue Loader をひととおり読む
  • Using Pre-Processors | Vue Loader
  • webpack の設定内では @nuxtjs/style-resources ではなく sass-resources-loader を直接使う
    • Nuxt を通して使う webpack では @nuxtjs/style-resources により sass-resources-loader が使われるが、Karma が使う webpack 設定は Nuxt を通して使う webpack とは別のものであるため
// karma.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// ...

module.exports = (config) => {
  config.set({
    // ...
    webpack: {
      plugins: [
        new VueLoaderPlugin(),
      ],
      // ...
      module: {
        rules: [
          {
            test: /\.vue$/,
            use: 'vue-loader',
          },
          {
            test: /\.css$/,
            use: [
              { loader: 'vue-style-loader' },
              { loader: 'css-loader', options: { sourceMap: true } },
            ],
          },
          {
            test: /\.scss$/,
            use: [
              { loader: 'vue-style-loader' },
              { loader: 'css-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { sourceMap: true } },
              {
                loader: 'sass-resources-loader',
                options: {
                  sourceMap: true,
                  resources: [
                    './src/assets/stylesheets/foundation/variables.scss',
                    './src/assets/stylesheets/foundation/colors.scss',
                  ]
                }
              }
            ]
          },
          // ...
        ]
      },
    },
    // ...
  })
}

Nuxt v2 へ上げたコミット

ソースを直接みたいときは下記。