vuetify.js - 如何解决 NuxtJS 和 Vuetify 2.0 之间的 scss 冲突

问题描述

我正在尝试升级现有的 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”。

将 vuetify 2.0 与 nuxtjs 和 style-resources 一起使用，有没有办法维持生计？

标签： vuetify.jsnuxt.js

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

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

vuetify.js - 如何解决 NuxtJS 和 Vuetify 2.0 之间的 scss 冲突

问题描述

解决方案

推荐阅读