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：

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

Answer 1

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

我按照以下步骤操作：/sf/answers/4264805541/

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

一个对我有用的更基本的 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