在头部部分使用 Vuetify 主题样式的 Nuxt

Question

我正在使用VuetifywithNuxt.js并且我已经分块了我的 css 文件，这样当我使用 npm run generate 时，我的所有样式都不会包含在我网站的每个页面中。为了做到这一点，我补充说......

 build: {
    extractCSS: true,
    splitChunks: {
       layouts: true
    }
}

但是我的vuetify-theme-stylesheet主题文件仍然包含在每个页面中。我怎样才能让我的vuetify-theme-stylesheet文件像我的 CSS 的其余部分一样分块？

<style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a{color:#0769ba}.v-application .primary{background-color:#0769ba!important;border-color:#0769ba!important}.v-application .primary--text{color:#0769ba!important;caret-color:#0769ba!important}

Answer 1

将 head 中的标签内容提取<style>到 css 文件后，您需要调整配置中的某些字段。

在您的 中nuxt.config.js，您需要将主题设置为禁用并链接提取的 vuetify css。

export default {
    css: [
        './assets/vuetify.css' // the extracted vuetify css
    ],
    vuetify: {
        theme: {
            disable: true
        }
    }
}

现在请记住，如果您想修改主题（颜色等），则需要在新的 css 文件中进行这些更改 ( assets/vuetify.css)

这也将避免完整 CSS 加载的轻微延迟，防止显示切换