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

Question

I am using vue-js-modal plugin, And inside this plugin, there is a style.css file. In this file, I need to change some setting to customize the changes in the modal style. But when I access this file and change whatever I want and then save my changes and run the application, the modal page look like the previous style and setting! And when I opened the console and checked the elements and select the modal page, the style setting in the browser it's the same previous setting! How can I solve this problem? Do I need to build the file contains the style.css ? If yes, how can I build it? If no, how to solve it?

Answer 1

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

Answer 2

A quick fix would be to change the version of the css file by adding to the path of the file.

Old: "/mycssfile.css"

New: "/mycssfile.css?1"

Answer 3

Try using Deep Selector in you vue app to rewrite modal css https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

for me syntax is following

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