vue.js - 在 nuxt 生成后更改了 css

Question

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

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

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

Answer 1

经过更多的挖掘，这似乎是 nuxt 的一个已知问题。
在非作用域样式标签中声明样式并在其他地方使用它时会发生这种情况。
我按照以下步骤操作:https://stackoverflow.com/a/60925793/9103301
这基本上是手动将 Vuetify 集成到 nuxt 中，而不是使用 @nuxt/vuetify .
然后我可以控制在 nuxt.config.js 中加载 css 的顺序- 首先是 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 一起安装