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 へ上げたコミット
ソースを直接みたいときは下記。