CODEWITHSUNDEEP
vuetify.jsnuxt.js
George Marios
George Marios

Reputation: 183

How to solve scss conflict between NuxtJS and Vuetify 2.0

I am trying to upgrade an existing NuxtJs project to use the new vuetify version 2.0. NuxtJS uses the 'node-sass' package for processing sass/scss files that are being used. Vuetify 2.0 depends on the package 'sass' and requires the 'node-sass' package to NOT be present so as not to conflict.

I have already tried removing the package 'node-sass' and a myriad of other possible configurations. The problem gets even more complex by the use of the package '@nuxtjs/style-resources', which is used to expose the scss files to components. This packages seems to be utilizing the unwanted 'node-sass' with no obvious options to bypass it. The closest to a working result that I have got is by declaring a custom loader as demonstrated here https://codesandbox.io/s/kk70v7217

nuxt.config.js:

    import Fiber from "fibers";
    import Sass from "sass";

    const customSass = {
      implementation: Sass,
      fiber: Fiber
    };

...

    build: {
        loaders: {
          scss: customSass
        }
      }

When not using '@nuxtjs/style-resources', the scss files seem to be loaded, but not exposed to the vuetify components, with errors as 'undefined variable $accent-color' in every variable occurrence. When using '@nuxtjs/style-resources' for the files to be exposed, it insists in looking for the unwanted 'node-sass'.

Is there a way to make ends meet in using vuetify 2.0 with nuxtjs and style-resources?

Upvotes: 0

Views: 1985

Answers (1)

Nicu Criste
Nicu Criste

Reputation: 3278

You can use vuetify-module. The current version is 1.0.1 and is using vuetify v2

After you install this module you can check the vuetify version with npm list vuetify

Upvotes: 1

Related Questions