vue项目中markdown生成的html模板中css样式无法调用的问题

Question

问题描述

在单独的vue文件中，后台获取的markdown文件经过前端makdown-loader和html-loader编译后生成的html模板插入到页面上。然后在该vue模块使用<style scoped>...</style> 内部的css样式无法调用。但是在index.html页面上的样式缺调用了。

疑问

1、怀疑是markdown编译后的节点插入页面后css晚一步生效的原因。（即使用了scoped）。 操作：删除了scoped后css可以生效，但是耦合性增大，会影响全局其他模块。

2、查看markdwon节点的class和id，发现所有节点不存在class，只有h1、h2、...h5这些标题标签存在id，看来只有css中的标签样式触发了效果。index.html页面中的css样式仅仅是清除了所有标签的默认样式。可能是css权重问题。 操作：添加scoped属性，然后测试一个标签样式使用！imporant最高权重测试效果，发现无效。看来只有可能是scoped的问题

有没有更好的办法使用scoped然而又会使得自定义的css样式覆盖全局css样式？？

Answer 1

给最外层的div加一个命名，然后把markdown样式放在这个命名下就可以了