如何解决 NuxtJS 和 Vuetify 2.0 之间的 scss 冲突答案

【问题标题】：How to solve scss conflict between NuxtJS and Vuetify 2.0如何解决 NuxtJS 和 Vuetify 2.0 之间的 scss 冲突
【发布时间】：2019-12-03 00:14:01
【问题描述】：

我正在尝试升级现有的 NuxtJs 项目以使用新的 vuetify 2.0 版。 NuxtJS 使用“node-sass”包来处理正在使用的 sass/scss 文件。 Vuetify 2.0 依赖包 'sass' 并且要求不存在 'node-sass' 包以免冲突。

我已经尝试删除包“node-sass”和无数其他可能的配置。通过使用包“@nuxtjs/style-resources”，问题变得更加复杂，该包用于将 scss 文件公开给组件。这个包似乎正在利用不需要的“node-sass”，没有明显的选项可以绕过它。我得到的最接近工作结果的方法是声明一个自定义加载器，如此处所示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
        }
      }

当不使用 '@nuxtjs/style-resources' 时，scss 文件似乎已加载，但未暴露给 vuetify 组件，在每个变量出现中都有错误为“未定义的变量 $accent-color”。当使用“@nuxtjs/style-resources”来公开文件时，它坚持寻找不需要的“node-sass”。

在使用带有 nuxtjs 和 style-resources 的 vuetify 2.0 时有没有办法维持生计？

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

您可以使用vuetify-module。当前版本是1.0.1，正在使用vuetify v2

安装此模块后，您可以使用npm list vuetify 检查vuetify 版本

【讨论】：

感谢 Nicu 的回复。我已经尝试过了，但不断收到错误：\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "vuetify/dist/vuetify.css"，尽管将其与干净的文件进行比较，工作，新的 nuxt-app 路径是正确的。与包@nuxtjs/style-resources 的依赖冲突也没有解决......我想总是可以选择将所有内容移动到全新安装（而不是使用样式资源），但这不是真的随着项目的发展，解决方案......
事实证明，最新版本的 @nuxtjs/style-resources 已被修补，可以在不使用 node-sass 的情况下与 vuetify-module 一起正常工作。总之，使用 vuetify-module 和最新的 style-resources 可以解决所有问题。