Nuxt/Vuetify variables.scss 未编译答案

【问题标题】：Nuxt/Vuetify variables.scss not being compiledNuxt/Vuetify variables.scss 未编译
【发布时间】：2019-12-22 08:09:49
【问题描述】：

我刚刚创建了一个新的 Nuxt 项目，添加了内置的 Vuetify 插件，并尝试进行一些基本的样式自定义。 Nuxt 配置几乎是开箱即用的：

vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: false, themes: { light: { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } }, 我添加到 assets/variables.scss 中的只是：

$font-size-root: 14px; $body-font-family: 'Cormorant Garamond', serif;

但这两种设置都没有被采用。我注意到在运行开发服务器时更改 variables.scss 文件不会触发编译，重新启动开发服务器也不会获取更改。我感觉配置有问题，即使这几乎是开箱即用的。我错过了什么？

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

vuetify variavles 仅在启用 treeShake 时工作，默认情况下仅在生产模式下工作。所以它不会在开发中做任何事情。您也可以为 dev 启用 treeShake，但请记住，它会显着增加项目的编译时间。

你的变量应该是 sass，而不是 scss

【讨论】：

谢谢，我想知道关于 treeShake 的注释是否是问题所在。 variables.scss 来自 nuxt 安装。
为什么应该是 sass 而不是 scss？

【解决方案2】：

如果您确实启用了 treeshake，但它仍然无法正常工作。直接在nuxt.config.js 中声明treeShake 和customVariables 而不是optionsPath 文件（仍然可以在那里声明颜色）有效..

【讨论】：