How to get SASS working in next branch about vuetify-module HOT 4 CLOSED

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.

from vuetify-module.

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.

from vuetify-module.

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

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

from vuetify-module.

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

from vuetify-module.