Skip to content
标签
欢迎扫码关注公众号

Quasar Framework build 后 css 样式缺失问题

今天给 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 中的设置代码:

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 颜色的数组:

js
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 属性中。
显示代码如下:

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

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

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

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

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

示例如下:

html
<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 的选项?如果有的话那就方便了。

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.