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 的 vendor 块。
  这包括一个“toaster”类和一个“toaster-info”类（最新的只有一个背景色）
• 一个 应用程序 缝隙，其中包括我自定义构建的引导 CSS。
  尽管引导文件位于 node_modules 文件夹中，因此它们应该放在上一个缝隙中，它们进入这里是因为我正在将它们编译为上面的 SASS 文件中的导入，该文件实际上来自代码。 这又包括一个“烤面包机”课程。

现在，我能看到的是：

• 这两个块似乎都是由浏览器加载的
• 标记正确使用了“toastr toastr-info”
• 仅应用来自应用程序（引导程序）的“烤面包机”类
• 'toaster' 和 'toaster-info' 类被浏览器完全忽略，'toaster-info' 的背景颜色也未应用

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

谁能帮我理解为什么会这样？

谢谢。

Answer 1

这纯粹是一个 CSS 问题。

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

我假设您要做的只是将默认的 .toast 背景颜色更改为白色（而不是黑色），但您想保留更具体的类，如 .toast-info、.toast-success 等他们是。

为此（不更改供应商文件），您可以将 .toast 定义更改为...

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

如果你使用的是 Sass 之类的预处理器（我认为你是这样的），这可以写得更简洁。

---

理想情况下，供应商文件应该已经定义了它们的样式，例如...

.toast {
  background-color: #030303;
}
.toast.toast-success {
  background-color: #51a351;
}

这将使“info”、“success” 等样式比 .toast 类具有更高的特异性，但看起来不像。也许你可以创建一个拉取请求?