时间戳

首页 > 解决方案 > 如何在 Production Build Vue 上安排 CSS 顺序？

css - 如何在 Production Build Vue 上安排 CSS 顺序？

问题描述

我的项目中有 CSS 问题，我希望我的 CSS 在我的开发环境中像这样 https://i.stack.imgur.com/8wB6R.png（1px 边框覆盖 2px 边框）加载，但是当我在我的生产环境变成这样https://i.stack.imgur.com/LdCOX.png（2px 边框覆盖 1px 边框）。这是我的 vuetify.js：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '../theme/default.styl'
Vue.use(Vuetify, {
  theme: {
    primary: '#ee44aa',
    secondary: '#59595c',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  },
  customProperties: true,
  iconfont: 'fa4',
})

这是我的 main.js：

import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router/";
import store from "./store";
import "./registerServiceWorker";
import 'roboto-fontface/css/roboto/roboto-fontface.css';
import 'font-awesome/css/font-awesome.css';
import axios from "axios";

这是我的 default.styl（我在其中覆盖 Vuetify CSS）：

@import '~vuetify/src/stylus/main.styl'
body
  font-family: "Poppins" !important
  font-size: $font-size-root
  font-weight: $font-weights.regular
  line-height: $line-height-root
h1
  font-size: 48px
  font-weight: $font-weights.thin
  letter-spacing: -1.5

标签： cssvue.jsvuejs2vuetify.js

解决方案

推荐阅读