vue引入md文件展示在页面中，正文字体大小无法调整

第1步：

1. 安装 vue-markdown-loader

    yarn add vue-markdown-loader -D
   

2. 安装 github-markdown-css、highlight.js

   yarn add github-markdown-css  -D
   yarn add highlight.js  -D
   

第2步：

在vue.config.js中配置webpack:

chainWebpack: (config) => {
    
    
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
    
    
        raw: true
      })
  }

第3步：

页面引入样式（可以局部引入，也可以在main.js文件中引入）

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'

第4步：

引入md文件

<template>
  <div class="content">
  	<!-- class的值必须包含markdown-body，否则样式不生效 -->
    <div class="markdown-body">
      <test></test>
   </div>
  </div>
</template>

<script>
// 引入md文件
import test from './test.md'

export default {
    
    
  components :{
    
    md}
};
</script>

最后1步：坑！！！

 在上面步骤完成之后，你可能会发现你的正文字体有点小，12px, 不协调，而且无论怎么加样式都不生效，调节不了正文字体大小

解决方法：

.markdown-body {
    
    
     font-size: 16px;
  }

如果还是不生效，比较顽固！！！

.markdown-body {
    
    
   font-size: 16px;
   /deep/ body {
    
    
     font-size: 16px;
   }
}

OK，到这里就结束了
希望记录的问题能够帮助到你~
啾咪~