Vue.js 生成nuxt后css发生了更改

我将Nuxt与Vuetify一起使用。 我创建了一个类并给它分配了一些填充。
该类在

layouts/default.vue

中的非范围

中定义 当我处于开发模式（

npm-run-dev

）时，一切看起来都和我的目标一样棒。 该类位于容器元素上，因此最终的html看起来像

当我处于开发模式时，devtools看起来是这样的：

所以

我的类

被应用。但是一旦我构建了项目（

npm run generate

）

我的类将被
容器
类规则覆盖：


我猜这是因为类组合成单个css的顺序，但不确定它在开发和构建项目中的行为是否不同。
如何修复它？
经过进一步挖掘，nuxt似乎存在已知问题。
在非作用域样式标记中声明样式并在其他地方使用时会发生这种情况

我遵循以下步骤：

基本上是手动将Vuetify集成到nuxt中，而不是使用
@nuxt/Vuetify
。
然后，我可以控制css加载到
numxt.config.js
中的顺序-首先是vuetify，然后是我的样式（我将其从a
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安装的