How to get SASS working in next branch

[phifa]

I set up a new nuxt project. I added the next branch like it says here: https://github.com/nuxt-community/vuetify-module#setup

It works. Now I want to customize SASS Variables. I created a file here: plugins/vuetify.js and referenced it in nuxt.config.js like so modules: ['@/plugins/vuetify'],.

This is the content of my vuetify file:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const opts = {
  options: {
    customProperties: true
  },
  customVariables: ['~/assets/style/variables.scss'],
  treeShake: true,
  icons: {
    iconfont: 'md'
  },
  theme: {
    themes: {
      light: {
        primary: '#334451',
        secondary: '#77b139',
        accent: '#77b139',
        error: colors.red.base,
        warning: colors.orange.base,
        info: '#ffffff',
        success: '#77b139',
        black: '#010101',
        white: '#ffffff'
      },
      dark: {
        primary: '#334451',
        secondary: '#77b139',
        accent: '#77b139',
        error: colors.red.base,
        warning: colors.orange.base,
        info: '#ffffff',
        success: '#77b139',
        black: '#010101',
        white: '#ffffff'
      }
    }
  }
}

Vue.use(Vuetify, opts)

When I run npm run dev I get this error and the script terminates:

> nuxt

 FATAL  Invalid or unexpected token                                       

  @import '../../styles/styles.sass'
  ^

  SyntaxError: Invalid or unexpected token
  at Object.compileFunction (vm.js:383:10)
  at Generator.next (<anonymous>)
  at Object.<anonymous> (node_modules/vuetify/lib/components/VApp/VApp.js:1)
  at Generator.next (<anonymous>)

   ╭──────────────────────────────────────────────╮
   │                                              │
   │   ✖ Nuxt Fatal Error                         │
   │                                              │
   │   SyntaxError: Invalid or unexpected token   │
   │                                              │
   ╰──────────────────────────────────────────────╯

[mgreengithelps]

You need to use nuxt.config.js to modify Vuetify, and delete your vuetify.js plugin.

So your nuxt.config.js will have a vuetify object like so:

vuetify: {
    customVariables: [
      '~/assets/style/variables.scss'
    ],
    theme: {
      themes: {
        light: {
          primary: '#334451',
          secondary: '#77b139',
          accent: '#77b139',
          error: colors.red.base,
          warning: colors.orange.base,
          info: '#ffffff',
          success: '#77b139',
          black: '#010101',
          white: '#ffffff'
        },
        dark: {
          primary: '#334451',
          secondary: '#77b139',
          accent: '#77b139',
          error: colors.red.base,
          warning: colors.orange.base,
          info: '#ffffff',
          success: '#77b139',
          black: '#010101',
          white: '#ffffff'
        }
      }
    },
    treeShake: true
  },

Then you can modify your variables.scss file.

[phifa]

What is the difference? I am currently just referencing the plugin file like this in my nuxt.config.js:

  modules: ['@/plugins/vuetify'],

[mgreengithelps]

I am not a contributor to this repository, but if we look under the lib directory in the code, the plugin.js file contains:

import Vue from 'vue'
<% if (options.treeShake) { %>
import Vuetify from 'vuetify/lib'
<% } else { %>
import Vuetify from 'vuetify'
<% } %>

Vue.use(Vuetify)

export default ({ app }) => {
  app.vuetify = new Vuetify(<%= JSON.stringify(options.vuetifyOptions, null, 2) %>)
}

It looks like it is taking care of the plugin file for you and referencing options in nuxt.config.js.

Also, check out the module.js file. This @nuxt/vuetify-module is basically taking care of a lot of the setup and configuration for you to optimize Vuetify with Nuxt.

For instance, it looks like it is requiring a SASS loader and pulling in the main.sass file when tree shake is enabled. No need for additional plugin files, just configure your options in nuxt.config.js and then modify variables in variables.scss and you are on your way.

For example, change the font in variables.scss:

@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'Roboto Condensed', sans-serif;

I have a couple projects using the vuetify object in nuxt.config.js and modified the variables.scss file and all seems to be working quite well.

Hope this helps.

[aldarund]

Please use discord for asking question https://discordapp.com/invite/nHzfFwe Closing this as non issue, like @mgreengithelps said u shouldnt use plugin at all and should use moduel with configuration in nuxt.config