无法更改 VueJs 插件的 .Css 文件答案

【问题标题】：Can't change .Css file for VueJs plugin无法更改 VueJs 插件的 .Css 文件
【发布时间】：2018-09-12 18:06:03
【问题描述】：

我正在使用vue-js-modal插件，在这个插件里面，有一个style.css文件。在这个文件中，我需要更改一些设置来自定义模态样式的更改。但是当我访问这个文件并更改我想要的任何内容然后保存我的更改并运行应用程序时，模态页面看起来就像以前的样式和设置！当我打开控制台并检查元素并选择模态页面时，浏览器中的样式设置与之前的设置相同！我怎么解决这个问题？我是否需要构建包含style.css 的文件？如果是，我该如何构建它？如果不是，如何解决？

【问题讨论】：

标签： javascript css vue.js vuejs2

【解决方案1】：

尝试在你的 vue 应用中使用 Deep Selector 来重写模态 css https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

对我来说语法如下

/deep/ p {
  margin-top: 0;
}

【讨论】：

是的，我使用了它并且它可以工作，但是当我尝试覆盖特定类时，其他属性会发生变化......就像我想将模态的边框半径更改为 25px，所以我只改变了那个类..不幸的是，背景在模态框外变成白色，在它是半透明之前。这里是样式文件：github.com/euvl/vue-js-modal/blob/master/dist/styles.css

【解决方案2】：

如果您使用的是单文件组件，为什么不在您自己的 CSS 文件或 style 标记中覆盖您想要更改的 CSS 规则？

【讨论】：

当我在模态框内使用样式标签更改border-radius时，背景边框半径不会更改模态框..这就是为什么我尝试在原始CSS文件中更改它插入。当我在浏览器中查看模式并从浏览器中的 CSS 更改边框半径时，它会更改！那么为什么在原来的CSS文件中没有改变呢？
你说得对，插件文件中的 CSS 可能需要一个构建步骤才能应用。我建议在模板中的模态组件中添加一个 ID，并使用它来确保您的规则优先。
你的意思是给modal加上id，然后用这个id来改变样式？以及如何构建它以应用更改？我需要这些步骤。

【解决方案3】：

一个快速的解决方法是通过添加到文件的路径来更改 css 文件的版本。

旧：“/mycssfile.css”

新：“/mycssfile.css?1”

【讨论】：

为什么要改名？
抱歉耽搁了。它将强制所有客户端下载新版本，这可能是阻止您加载新 css 文件的原因。问号和后面的数字指定 css 文件的版本号。