Vuetify-module: Vuetify with nuxt not building but dev is working

[jessielaf]

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:

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)/
        })
      }
    }
  }
}

Version

• nuxt: 2.8.1
• @nuxtjs/vuetify: 1.0.2
• node: 10.15

Thanks in advance!

[kevinmarrec]

@jessielaf It looks like you just have not node_modules up to date, I mean your issue is cause Vuetify main.sass file seems to somehow contain semicolons but it shouldn't.

Can you try purge your node_modules & reinstall dependencies ?

[jessielaf]

I did that but still getting the same problem. The problem is in my variables.scss. I already used scss in my application and vuetify uses sass. This makes that the sass loader is loaded but the variables file is scss. It works in dev mode though

[kevinmarrec]

@jessielaf Could you create a repository with the reproduction please ? :) So I can debug easier

[jessielaf]

@kevinmarrec I can't seem to reproduce it. Is it okay if I add you to my private repo?

[kevinmarrec]

@jessielaf If you don't have sensitive data, yes sure you'll be able to remove me afterwards

[jessielaf]

Done! Thanks for the help

[kevinmarrec]

@jessielaf I'll check when I've some time :)

[jessielaf]

Thanks! By the way I changed a bit of code so it looked more like the normal implementation. The error that is expected is:

And everything can be found in the update-vuetify branch

[kevinmarrec]

@jessielaf Okay I took a look and here is my feedback :

• You're using dayspan-vuetify which rely on Vuetify 1.3.9, so be aware of that

• SASS/SCSS issue seems to come from styleResources, I don't know how to deal with it so I prepared a branch with a fix, I didn't create a PR yet as you probably don't want traces in commits, so you can just copy paste changes, the name of the branch is fix-sass-issue-on-update-vuetify, feel free to delete it afterwards.

I think styleResources module is conflicting around node-sass vs dart-sass, I don't have any workaround except the commit I proposed on the fixed branch, which means not using @nuxtjs/styleResources (and yes it means having to copy imports whenever you have to use variables in components)

[jessielaf]

Hmm that is weird I added that module when I tried to reproduce it and it did not give me a problem. Maybe I didn't use it right. Anyway thank you! I will create a new issue on @nuxtjs/styleResources. I know I use dayspan-vuetify thats why I want to go to version 2.0!

[kevinmarrec]

/cc @jessielaf
https://github.com/nuxt-community/style-resources-module/issues/67
has been fixed by
https://github.com/nuxt-community/style-resources-module/pull/69
released in 1.0.0 of the module, you can upgrade it & enjoy ! :)