vue.js项目中css样式应用不上

Question

这是代码：

加载之后是这样的：

发现了吗，样式完全没生效

但是如果去掉scoped,图片立马就乖乖的变成300px了

如果去掉这个的话我这个页面的样式就会应用到别的页面去

这可如何是好

Answer 1

从代码没看出什么问题，有一种可能是这个图片是用 v-html 动态生成的吧？如果是那样的话的确会有这个问题的，官方文档里有提到，用深度作用选择器就可以解决

Answer 2

你在img 标签外边的p 上边加一个class; img-con

.img-con img{
    width:300px
}

Answer 3

深度作用符号试一下。

<style scoped>
.a >>> .b { /* ... */ }
</style>

你应该是用v-html将content插入到页面对吧？

Answer 4

• 公共样式提炼到main.less里面，单独页面的样式文件@import引入main.less.

如果不想提到main.less里面，单独页面的样式单独提出去就好了