Vuetify with nuxt not building but dev is working

jessielaf commented 5 years ago

Hi guys,

I am trying to upgrade to vuetify 2 but I keep running into some problems. It is that of the switch to dart-sass. I am was node-sass before but as shown in the vuetify upgrade guide they use dart-sass.

Everything worked when using it in demo. Probably because the vuetify module is in devModules. So I added this to my nuxt.config.js

build: {
    loaders: {
      scss: {
        implementation: require('sass'),
        fiber: require('fibers')
      }
    }
}

But this also didn't work. The error that I keep seeing: Hyper_k1Fc2PE6gS

I tried it with node-sass and sass package with it also being in my loaders. The only option I am seeing right now is to change all my scss to sass which is far from ideal.

My nuxt config looks like this:

require('dotenv').config()

module.exports = {
  mode: 'universal',
  head: {
    title: 'roster',
    meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  loading: { color: '#4BAC6A' },
  css: ['~/assets/style/base.scss'],
  plugins: [
    '~/plugins/axios.js',
    '~/plugins/dayspan-vuetify.js',
    '~/plugins/filters.js',
    '~/plugins/global-components.js',
    '~/plugins/globals.js',
    '~/plugins/scheduleSettings.js',
    '~/plugins/jwt.js',
    '~/plugins/vee-validate.js',
    '~/plugins/vue-lazyload.js'
  ],
  devModules: ['@nuxtjs/vuetify'],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources',
    'cookie-universal-nuxt',
    [
      'nuxt-i18n',
      {
        seo: false,
        locales: [
          {
            code: 'en',
            iso: 'en-US',
            name: 'English'
          },
          {
            code: 'nl',
            iso: 'nl-NL',
            name: 'Nederlands'
          }
        ],
        defaultLocale: 'en',
        vueI18n: {
          messages: {
            en: require('./assets/translations/en.json'),
            nl: require('./assets/translations/nl.json')
          }
        },
        strategy: 'prefix_except_default',
        silentTranslationWarn: false
      }
    ]
  ],
  styleResources: {
    scss: ['~/assets/style/variables.scss']
  },
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: process.env.API_SITE,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  vuetify: {
    customVariables: ['~/assets/style/variables.scss']
  },
  manifest: {
    theme_color: '#4BAC6A',
    background_color: '#4BAC6A',
    name: 'Effe',
    description: 'An original take on scheduling',
    display: 'standalone'
  },
  server: {
    port: process.env.PORT
  },
  env: process.env,
  build: {
    extend(config, ctx) {
      const urlLoader = config.module.rules.find(rule => rule.test.test('.ttf'))
      urlLoader.test = /\.(woff2?|eot|ttf|pdf|otf)(\?.*)?$/i

      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}