css - 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 bundle 正确创建如下:

• 包含 Toaster CSS 的vendor block 。
  这包括一个“ toastr ”类和一个“ toastr 信息”类(最新的只有背景色)
• 一个应用 chink，其中包含我自定义构建的 bootstrap CSS。
  尽管 Bootstrap 文件位于 node_modules 文件夹中，因此，它们应该放在前面的缝隙中，它们会进入此处，因为我将它们编译为上面的 SASS 文件中的导入，该文件实际上来自代码。< br/>这又包括“ toastr ”类(class)。

现在，我能看到的是:

• 这两个 block 似乎都由浏览器加载
• 标记正确使用“toastr toastr-info”
• 仅应用来自应用程序( Bootstrap )的“ toastr ”类
• 浏览器完全忽略“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;
}

这将使“信息”、“成功” 等样式比 .toast 类具有更高的特异性，但它不会看起来不像他们。也许你可以创建一个拉取请求 🙂