nuxt生成后css更改

如何解决nuxt生成后css更改

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

在开发模式下，devtools看起来像这样：

因此已应用my-class。但是一旦我建立了项目（npm run generate）my-class就会被container类规则所覆盖：

我想这是由于类合并到单个css中的顺序而发生的，但是不确定它对于dev和build项目的行为是否不同。 我该如何解决？

解决方法

进一步挖掘之后，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一起安装