Nuxt/Vuetify Variables.scss 未编译

Question

我刚刚创建了一个新的 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;

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

Answer 1

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

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