nuxt generate 后css更改

【问题标题】：css changed after nuxt generatenuxt generate 后css更改
【发布时间】：2020-12-02 12:47:05
【问题描述】：

我将 Nuxt 与 Vuetify 一起使用。我创建了一个类并为其分配了一些填充。
该类在layouts/default.vue 中的无范围<style> 中定义。
当我处于开发模式 (npm run dev) 时，一切看起来都如我所愿。该类位于容器元素上，因此最终的 html 看起来像
<div class="container container--fluid my-class">

当我处于开发模式时，开发工具看起来像这样：

所以my-class 被应用。但是一旦我构建了项目 (npm run generate) my-class 就会被 container 类规则覆盖：

我猜这是因为类组合成单个 css 的顺序，但不确定它对于开发和构建项目的行为不同。我该如何解决？

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

经过更多挖掘，这似乎是 nuxt 的一个已知问题。在非作用域样式标签中声明样式并在其他地方使用它时会发生这种情况。

我按照以下步骤操作：https://stackoverflow.com/a/60925793/9103301

这基本上是手动将 Vuetify 集成到 nuxt 中，而不是使用 @nuxt/vuetify。然后我可以控制 css 在 nuxt.config.js 中的加载顺序 - 首先是 vuetify，然后是我的样式（我从布局中移动了 css 文件）。

一个对我有用的更基本的 vuetify 插件：

import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)

export default (ctx) => {
  const vuetify = new Vuetify({
    theme: {
      dark: false, // From 2.0 You have to select the theme dark or light here
    },
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

你也必须安装图标，vuetify 默认是 mdi，它与npm install @mdi/font -D一起安装

【讨论】：