Quasar Framework build 后 css 样式缺失问题

🏷️ Quasar

今天给 blog 的标题背景色加了随机颜色的效果，local 是好的，但是 build 后发布到线上发现一部分 bg 的 class 是有的，一部分 bg 的 class 找不到。

调查发现：最终生成的 css 文件名是 app.[hashcode].css（这是个压缩后的文件），里面确实没有对应的 class，而 build 前样式是保存在 /node_modules/quasar-framework/dist/quasar.mat.css 里的，文件里确实有这些样式。

本以为可能是主题导致的问题，结果将 main.js 中的默认样式改成了自定义主题，结果还是一样，编译后的 css 里仍然缺少对应的 class。

main.js 中的设置代码：

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
require(`./themes/app.${__THEME}.styl`)
// 2. or, use next line to activate DEFAULT QUASAR STYLE
// require(`quasar/dist/quasar.${__THEME}.css`)

这说明问题出在生成压缩 css 文件的过程中，build 处理中没有将该部分 class 保存到压缩后的 css 文件里去。

会不会是由于压缩 css 时，只将明确在 class 属性中使用到的 class 才保存在新 css 文件导致的呢？
没有直接使用的 class，会不会是为了减小压缩后 css 文件的体积而被 build 处理故意去掉了呢？

在这里要说明一下随机颜色效果的实现，因为是随机的颜色，所以 class 是动态拼接而成的。

首先定义了一个 bg 颜色的数组:

const CARD_TITLE_BGCOLORS = ['secondary', 'info', 'warning', 'blue', 'indigo', 'deep-purple', 'pink', 'light-blue', 'cyan', 'teal', 'light-green', 'orange', 'green', 'lime', 'deep-orange']

其次，vue 中随机从上面的数组中取一个颜色，放入 color 属性中。
显示代码如下：

<div :id="item.Id" :class="'card-title bg-' + item.color">

为了验证我的猜想，将上面的代码改成使用固定的 class：

<div :id="item.Id" class="card-title bg-lime">

果不其然！build 后的 css 文件中出现了 bg-lime 样式，而这在修改前是没有的。

知道问题就好解决了。新建了一个不会被用到的 vue 文件，将上面用到的 class 都明确的使用了一次。

示例如下：

<div class="card-title bg-secondary bg-info bg-warning bg-blue bg-indigo bg-deep-purple bg-pink bg-light-blue bg-cyan bg-teal bg-light-green bg-orange bg-green bg-lime bg-deep-orange">
</div>

虽然解决办法感觉比较丑陋，但是解决了问题。

另外，不知道 build 设置中有没有压缩 css 时不过滤未使用的 class 的选项？如果有的话那就方便了。