CSS 文件对 Vue 产品构建没有影响答案

【问题标题】：CSS file has no effect on Vue prod buildCSS 文件对 Vue 产品构建没有影响
【发布时间】：2020-01-08 10:17:29
【问题描述】：

我有一个使用图表模块的带有单个文件组件的 Vue 项目。要覆盖图表模块 CSS 中的某些样式，我在 assets 文件夹中有一个自定义 CSS 文件，其中包含覆盖某些样式的行（深色背景而不是白色等）。它与 npm run dev 配合得很好，我可以看到更改在本地主机上没问题。

我有一个 S3 存储桶，我使用 Gitlab CI 用标记的构建更新我的网站。但是，更新后，提到的样式似乎没有受到影响。我检查了 S3 存储桶，生成的 CSS 确实包含新行，但我看不到它们生效。任何提示将不胜感激！

【问题讨论】：

不是某种缓存问题？
很遗憾没有，我用 Ctrl+F5 进行了检查。
你能提供一个最小的，Reproducible example，配置或一切可以帮助？
@JustGreg 如果您使用 Chrome，您可以打开开发人员工具 (F12)，然后右键单击 URL 文本输入旁边的页面重新加载按钮，然后单击“清空缓存和硬重新加载”。
@JKL 完成了，同样的问题。

【解决方案1】：

好的，我修好了。看来我遇到了this issue。我设法通过使用 npm run build 构建生产版本来重现它。为了提供 dist 包，我安装了 serve 并检查了 localhost:5000:

sudo npm install -g serve
serve -s dist

这样我可以在不使用 Gitlab CI 的情况下尝试不同的 CSS 样式。问题出在 CSS 顺序上，我必须将自定义 CSS 文件导入组件而不是 main.js 中，并且必须在样式中使用 !important。

【讨论】：