时间戳

首页 > 解决方案 > Vuetify 包 css 覆盖应用程序的 css

css - Vuetify 包 css 覆盖应用程序的 css

问题描述

希望这是一个新手问题。

我正在努力在几个屏幕中将 vuetify 集成到现有的 vuejs Web SPA 应用程序中。该应用程序使用 目的 ui作为它的 css 和样式。在将 vuetify 集成到应用程序中后，我们看到该站点现在具有 vuetify 的样式。

如何确保 vuetify 的样式仅限制在少数屏幕上的特定 vuetify 控件上，这些控件用于这些控件？

更新 1：

index.js

if (Meteor.isClient) 
{
  import 'vuetify/dist/vuetify.min.css';
}

index.html： meteor-bundled-css下面的行应该在捆绑的 css 文件中包含 vuetify.min.css，但我没有在捆绑的文件中看到 css 结构，尽管该网站现在是一个材料 ui\Vuetify 网站。

<head>
  <link type="text/css" href="/css/purpose.css" rel="stylesheet">
  <meteor-bundled-css /> 
</head>

标签： cssvue.jsmeteorvuetify.js

解决方案

我能够通过删除 Vuetify 并在项目中添加 BootstrapVue 来解决这个问题，wrt 到 BootstrapVue，Bootstrap css 文件，而不是在 index.js 文件中添加 css 文件，我将其添加到客户端文件夹中以便它可以由 Meteorjs 本身捆绑\缩小。

推荐阅读