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 } } } }, 我添加到asset / variables.scss的全部是这样：

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

但是没有选择任何设置。我注意到，更改variables.scss文件不会在运行开发服务器时触发编译，也不会在重新启动开发服务器时获取更改。我觉得配置有些问题，即使这几乎是开箱即用的。我想念什么？

Answer 1

vuetify可变变量仅在启用treeShake时有效，默认情况下仅在生产模式下有效。所以它不会在开发中做任何事情。您也可以为开发人员启用treeShake，但是请记住，它将大大增加项目的编译时间。

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

Answer 2

如果您确实启用了树状握手，但仍然无法使用。直接在treeShake中声明customVariables和nuxt.config.js而不是optionsPath文件（仍然可以在那里声明颜色）。