时间戳

首页 > 解决方案 > nuxt generate 后css更改

vue.js - nuxt generate 后css更改

问题描述

我将 Nuxt 与 Vuetify 一起使用。我创建了一个类并为其分配了一些填充。
该类是在一个无范围的 in 中定义<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 的顺序，但不确定它对于开发和构建项目的行为不同。我该如何解决？

标签： vue.jsvuetify.jsnuxt.js

解决方案

经过更多的挖掘，这似乎是 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

推荐阅读