Vue.js CSS捆绑包优先级（？）

Question

我对Vue.js CLI生产捆绑有一个奇怪的问题，我无法完全查明根本原因，并且感谢您的帮助。

我的main.js中有一个Vue CLI 3应用程序，其中包含以下内容（相关摘录）：

// Bootstrap
import "@/assets/bootstrap/bootstrap.scss";
import "bootstrap-vue/dist/bootstrap-vue.css";
import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue);

// Toastr
import Toastr from "vue-toastr";
import "vue-toastr/dist/vue-toastr.css";
Vue.use(Toastr, {
  defaultPosition: "toast-bottom-right"
});

在我的开发环境（npm run serve）CSS中运行此程序很好。

在生产完成（npm run build）之后运行此程序时，某些类...未应用，我无法解释原因。鉴于我能看到的唯一区别是捆绑过程，所以我倾向于朝这个方向寻找问题。

我在vue.config.js中对绑定进行了如下定制（相关摘录）：

cacheGroups: {
  icons: {
    name: "icons",
    test: /[\\/]node_modules[\\/](@fortawesome)[\\/]/,
    chunks: "all",
    priority: 3
  },
  vendors: {
     name: "vendors",
     test: /[\\/]node_modules[\\/]/,
     chunks: "all",
     priority: 1
  }
}

结果，捆绑的CSS正确创建如下：

• 包含Toaster CSS的供应商块。
  其中包括一个“烤面包机”类和一个“烤面包机信息”类（最新版仅具有背景色）
• 一个应用小节，其中包括我自定义的自举引导CSS。
  引导文件位于node_modules文件夹中，因此它们应该位于前一个位置，它们进入此处是因为我将它们作为导入编译到了一个SASS文件中，该文件实际上是由代码提供的。 br /> 再次包括“烤面包机”类。

现在，我看到的是：

• 两个块似乎都由浏览器加载
• 标记正确使用了“ toastr toastr-info”
• 仅应用应用（引导程序）中的“烤面包机”类
• 浏览器完全忽略“ toaster”和“ toaster-info”类，并且不应用“ toaster-info”的背景色

我用几种浏览器进行了测试，以排除任何特定的浏览器怪异。
浏览器计算的样式显示，由于某些我不了解的原因，这些类被“排除”（“排除”的含义在样式树中，但具有删除线）。

有人可以帮助我了解为什么会这样吗？

谢谢。

Answer 1

这纯粹是CSS问题。

由于您的应用和供应商CSS定义了.toast类样式，因此最后加载的内容具有最高的特异性。

我假设您要做的就是将默认的.toast背景颜色更改为白色（而不是黑色），但是您想保留更具体的类，例如.toast-info，{{ 1}}等。

为此（无需更改供应商文件），您可以将.toast-success的定义更改为...

.toast

如果您使用的是Sass这样的预处理器（我想是这样），则可以更简洁地编写。

---

理想情况下，供应商文件应定义其样式，例如...

.toast:not(.toast-info),
.toast:not(.toast-success),
.toast:not(.toast-warning),
.toast:not(.toast-error) {
  background-color: rgba(255, 255, 255, .85);
}

会赋予“ 信息” ，“成功” 等样式，其样式比.toast { background-color: #030303; } .toast.toast-success { background-color: #51a351; } 类具有更高的特异性，但是看起来却不像它们做。也许您可以创建请求请求